数字展示变化滚动效果

一、背景

最近在工作开发中需要用到一个数字滚动的效果，首先定位有个效果就好，滚动速度不需要严格的把控。最后的成品效果就是以下酱紫：



再放一个demo版的图，你萌感受一下：



总之，就是这样了。

二、技术储备

1、jquery animate方法的使用

2、js的数组操作 parseInt charAt方法等等

三、代码

1、css部分

<style type="text/css">
.box{
height: 44px;
position: absolute;
overflow: hidden;
top: 50%;
margin-top: -20px;
margin-left: -30px;
left: 50%;
}
.box span{
display: inline-block;
background-image: -webkit-gradient(linear,0 0,0 bottom,from(#fef637),to(#f90));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 30px;
height: 44px;
font-size: 44px;
line-height: 44px;
}
.box .sign-box span{
width: 15px;
}
.box .digit-container{
width: 30px;
text-align: center;
overflow: hidden;
font-size: 0;
}
.l{
float: left;
}
</style>

2、html部分

<div class="js-box box"></div>

　　

3、js部分（用的jquery）

<script type="text/javascript">
$(function(){
var lastnum = "410,134.12",lastarr = "";
var Event = {
// 例 510,085.00
number: function(digit){
var num_arr=[];
for(var i = 0;i<digit.length;i++){
num_arr.push(digit.charAt(i));
}
return num_arr;
},
dom: function(arr){
var str = '';
for(var i = 0;i<arr.length;i++){
if(parseInt(arr[i])>=0){
str += '<div class="l js-l-box digit-container" data-show='+arr[i]+'>\
<span>0</span>\
<span>1</span>\
<span>2</span>\
<span>3</span>\
<span>4</span>\
<span>5</span>\
<span>6</span>\
<span>7</span>\
<span>8</span>\
<span>9</span>\
</div>';
}else{
str += '<div class="sign-box l"><span>'+arr[i]+'</span></div>';
}
}
return str;
},
animation: function(){
var height = $(".js-box").height();
$(".js-l-box").each(function(i){
var num = parseInt($(this).data("show"));
var scrollTop = 0;
var scrollTop = height * num;
$(this).css("margin-top",0);
$(this).animate({marginTop: -scrollTop},1500);
console.log(scrollTop);
});
}
};
var final_arr = Event.number('510,085.12');
$(".js-box").html(Event.dom(final_arr));
Event.animation();
});
</script>

　

四、over！