js数字滚动效果组件

因为在网上没有找到想要的效果，因此自己整了一个简单的。有需要的可以自己拿去改，需要引入jquery。

gif录制太麻烦了，就不搞了，放个图片意会一下

调用方式

// 第一个参数elementId：元素id
// 第二个参数num：需要展示的数字
// 第三个参数speed：数字滚动动画所需要的时间（毫秒）
// 第四个参数length：需要展示的数字位数，不足会在前面补0；超出并不会截取，而是展示全部。可以不填
numberScroll(elementId,num,speed,length)

js部分

function numberScroll(elementId,num,speed,length){$("#" + elementId).addClass("number-scroll")var numStr = num.toString()if(length && length > numStr.length){for (var i = 0; i < length - numStr.length; i++) {numStr = '0' + numStr}}var numberScrollItem = '<div class="number-scroll-view"><div class="number-scroll-item">'for (var i = 0; i < 10; i++) {numberScrollItem += '<div>'+i+'</div>'}numberScrollItem += '</div></div>'if(!$("#"+elementId).html()){var str = ''for (var i = 0; i < numStr.length; i++) {str += numberScrollItem}str += '<span class="number-scroll-value">'+ numStr +'</span>';$("#"+ elementId).html(str)}else{var origin = $("#"+elementId + " .number-scroll-value").html()$("#"+elementId + " .number-scroll-value").html(numStr)var diff = numStr.length - origin.lengthif(diff > 0){for (var i = 0; i < diff; i++) {$("#"+ elementId).prepend(numberScrollItem)}}else if(diff < 0){for (var i = 0; i < -diff; i++) {$("#"+ elementId).children().eq(0).remove()}}}var lineHeight = Number($("#"+ elementId +" .number-scroll-item").css("line-height").slice(0,-2))for (var i = 0; i < numStr.length; i++) {$("#"+ elementId).children("div:eq("+ i +")").children().animate({top : - Number(numStr[i]) * lineHeight},speed)}
}

css部分

@font-face {font-family: 'FX-LED';src: url('../font/FX-LED.ttf')
}.number-scroll{display: flex;flex-direction: row;margin-left: 10px;
}.number-scroll-view{width: 33px;height: 46px;overflow: hidden;border: #4998E3 1px solid;box-shadow: 0 0 20px 1px rgba(46, 199, 255, 0.55) inset;line-height: 46px;margin:0 2px;text-align: center;
}.number-scroll-item{font-family: FX-LED;font-size: 42px;color: #4DCFFF;position: relative;
}.number-scroll-value{display: none;
}

字体：液晶字体下载

js数字滚动效果组件相关推荐

vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
CSS3 + JS 数字滚动效果
原生JS+CSS3版: <!DOCTYPE html> <html> <head><title>CSS3 数字滚动效果</title> &l ...
js、jQuery实现数字滚动效果
一.效果(监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果) 二.代码在滚动数字的标签上加上类名counter <div class="about_right flex5&qu ...
html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下: 用jquery实现 html: <div class="develop"> <!--滚 ...
【网站】数字滚动效果的实现方法
代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...
jQuery数字滚动效果
jQuery数字滚动效果## 引入jQuery <script src="js/jquery.min.js"></script> body <div ...
CSS3简单实现，数字滚动效果
之前项目要做一个数字滚动效果. 因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下. 首先每一个数字拆成单个数字. 我这边9个数字,根据自己需要添加. /* ...

js数字滚动效果组件

js数字滚动效果组件相关推荐

最新文章

热门文章