效果
下载并引入所需插件
JQuery – 链接: JQuery.
numScroll – 链接: numScroll.
<script src="./jquery-3.3.1.min.js"></script>
<script src="./numScroll.js"></script>
Html代码
<div class="box"></div>
css代码
.box {
line-height: 24px;
height: 24px;
overflow: hidden;
display: inline-block;
position: relative;
margin-top: 2px;
}
/* 该样式必须有 */
.mt-number-animate .mt-number-animate-dom {
width: 11px;
text-align: center;
float: left;
position: relative;
top: 0;
}
/* 该样式必须有 */
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
width: 100%;
float: left;
}
JS代码
var plnum = 368; //幸运数字(不要直接写在页面上)
//调用numberAnimate方法,传入num(数字)、speed(动画执行时间)
$('.box').numberAnimate({
num: plnum, speed: 1000 });