jQuery数字滚动效果

版权声明：本文为博主原创文章，未经博主允许不可转载。转载请注明出处 https://blog.csdn.net/qq_32442967/article/details/82355566

jQuery数字滚动效果

引入jQuery

<script src="js/jquery.min.js"></script>

body

<div id="count"></div>

js

$(function(){
    $("#count").numberRock({
        lastNumber:666,     //终止数字
        duration:800,
        easing:'swing',     //慢快慢
    });
});

(function($){
    $.fn.numberRock=function(options){
        var defaults={
            lastNumber:100,
            duration:2000,
            easing:'swing'  //swing(默认 : 缓冲 : 慢快慢)  linear(匀速的)
        };
        var opts=$.extend({}, defaults, options);

        $(this).animate({
            num : "numberRock",
        },{
            duration : opts.duration,
            easing : opts.easing,
            complete : function(){
                console.log("success");
            },
            step : function(a,b){  //可以检测我们定时器的每一次变化
                $(this).html(parseInt(b.pos * opts.lastNumber));
            }
        });

    }

})(jQuery);

---

www.foryh.com

---