jquery 动态数字滚动插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jquery制作动态数字滚动效果

参数说明：

  • lastNumber:100, //最终值

  • duration:2000, //时间

  • easing:'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的)

主要js：

<script>
 (function($){
    $.fn.numberRock=function(options){
        var defaults={
            lastNumber:100,　　//最终值
            duration:2000,　　//时间
            easing:'swing'  //swing(默认 : 缓冲 : 慢快慢)  linear(匀速的)
        };
        var opts=$.extend({}, defaults, options);
 
        $(this).animate({
            num : "numberRock",
            // width : 300,
            // height : 300,
        },{
            duration : opts.duration,
            easing : opts.easing,
            complete : function(){
                console.log("success");
            },
            step : function(a,b){  //可以检测我们定时器的每一次变化
                //console.log(a);
                //console.log(b.pos);   //运动过程中的比例值(0~1)
                $(this).html(parseInt(b.pos * opts.lastNumber));
            }
        });
 
    }
 
})(jQuery); 
</script>