zoukankan      html  css  js  c++  java
  • jquery 动态数字滚动

    1、引入jQuery

    <script src="js/jquery.min.js"></script>
    2、html

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

    3、js函数

    (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);

    4、js代码

    $(function(){
      $("#counta").numberRock({
      lastNumber:14,
      duration:3000,
      easing:'swing', //慢快慢
      });
    });

  • 相关阅读:
    java I/O框架 (三)基本流
    java I/O框架 (二)文件操作(File)
    java I/O框架 (一)总览
    8.内部类
    7.权限
    6.继承
    5.代码块
    4.面向对象
    3控制语句
    PHP ksort() 函数
  • 原文地址:https://www.cnblogs.com/init-007/p/9958265.html
Copyright © 2011-2022 走看看