多组滚动数字

Html

Css

.textC {
 position:absolute;
 width:500px;
 overflow:hidden;
 margin-top: 100px;
 line-height:30px;
 margin-left: 300px;
 height:30px;
}
.textC span {
 color: #13BEEC;
 font-size: 28px;
 font-weight: bold;
 font-family: "微软雅黑";
 position: absolute;
}

$(function(){
        var a =  [];
        // NumbersAnimate.Duration=1500;
        $(".textC").each(function(index){
            a[index]=$(this).attr('data-numbers');
            NumbersAnimate.Animate($(this),a[index]);
        });

});
 var NumbersAnimate={
 Duration:1500,
 Animate:function(target,number){
 var array=number.toString().split("");
 // console.log(array)
 //遍历数组
 for(var i=0;i<array.length;i++){
 var currentN=array[i];
 //数字append进容器
 var t=$("");
 if ((i+1)%4==0) {
 $(t).append(""+array[i]+"");
 }else{
 $(t).append(""+array[i]+"");
 }

$(t).css("margin-left",18*i+"px");
 target.append(t);
 //生成滚动数字,根据当前数字大小来定
 for(var j=0;j<=currentN;j++){
 var tt;
 if(j==currentN){
 tt=$(""+j+"");
 }else{
 tt=$(""+j+"");
 }
 $(t).append(tt);
 $(tt).css("margin-top",(j+1)*25+"px");
 }
 $(t).animate({marginTop:-((parseInt(currentN)+1)*25)+"px"},NumbersAnimate.Duration,function(){
 $(this).children(".childNumber").remove();
 });
 }
 }
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

多组滚动数字



代码描述：滚动数字（一个方向，首次加载有滚动效果）

2

最新

发表评论全部评论

暂时没有评论！

罄?一瞥0

2017/6/24 9:04:35

@海伦凯勒一直滚动的话，显示的数字还有意义吗
回复

海伦凯勒0

2017/6/21 10:58:34

可以让每位数字一直在不停循环滚动吗
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

せい

相关代码

多组滚动数字

最新