如何使用插件数字滚动插件numberAnimate.js？

有个实现数字滚动的需求，想着肯定有很多这种效果的插件，就不自己造轮子了，于是，找了个numberAnimate js数字滚动插件，还挺好用，很简单，刚好符合需求。

代码如下：

!DOCTYPE htML>
    html lang="en">
        head>
            meta charset="utf-8">
            tITle>
    数字滚动插件/title>
            link rel="stylesheet" type="text/css" href="../dist/style/numberAnimate.css" />
        /head>
        body>
        无分隔符，无小数点：p class="numberRun">
    /p>
    br>
    br>
        /body>
        script src="http://cdn.bootcss.COM/jquery/1.8.3/jquery.min.js">
    /script>
        script type="text/javascript" src="../dist/script/numberAnimate.js">
    /script>
        script type="text/javascript">
    $(function(){
        //初始化        VAR numRun = $(".numberRun").numberAnimate({
num:'1553093', speed:1000}
    );
            //想要的是过一段时间加1的效果，可以实现        var nums = 1553093;
        setInterval(function(){
                nums+= 1;
                numRun.resetData(nums);
        }
    ,2000);
    }
    )/script>
    /html>
    

想要的效果是过一段时间加1的效果，可以实现，但是有个小小的bug，那就是，比如说，个位数字加到9时进一位然后该位上为0，问题来了，这里0的数字却滚动不出来，直接到了下一个时间间隔时滚动到了11，调试了很久发现，是numberAnimate.js中，第85行的判断条件有问题，注释掉该if判断就好了，如下图：

上图中，第85行的$(this).css("top")一直都是0px，而第84行计算获取到的thisTop 在数字滚到到0 时值为0px，所以导致直接跳过了判断，没有执行到transform动画那里，所以少了0的效果，导致看起来的效果就是9直接跳到了11，没有10。

另外，提示一句，改变数字的字号大小，需要修改的numberAnimate.css中的height、width、字号的比例要把握好，一不小心就坏了，亲身体会 -_-||

相关推荐：

在微信小程序中如何使用数字滚动插件

Jquery数字滚动切换插件实现方法

jQuery的滚动条插件Nicescroll是如何使用的？

以上就是如何使用插件数字滚动插件numberAnimate.js？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！