当前位置：Gxlcms > JavaScript > jquery实现数字滚动特效

jquery实现数字滚动特效

时间：2021-07-01 10:21:17 帮助过：30人阅读

这次给大家带来jquery实现数字滚动特效，jquery实现数字滚动特效的注意事项有哪些，下面就是实战案例，一起来看一下。

有分隔符，有小数点：<p class="numberRun"></p> <br><br>

  • 只有分隔符：<p class="numberRun2"></p> <br><br>

  • 只有小数点：<p class="numberRun3"></p> <br><br>

  • 无分隔符，无小数点：<p class="numberRun4"></p>

运行效果图：

具体代码如下

  1. <html>
  2. <head>
  3. <title>数字滚动插件</title>
  4. <meta charset="gb2312">
  5. <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  6. <style>
  7. /*数字滚动插件的CSS可调整样式*/
  8. .mt-number-animate{ font-family: '微软雅黑'; line-height:40px; height: 40px;/*设置数字显示高度*/; font-size: 36px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }
  9. .mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}
  10. .mt-number-animate .mt-number-animate-dom{ width: 20px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
  11. .mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}
  12. </style>
  13. </head>
  14. <body>
  15. <br><br>
  16. 有分隔符，有小数点：<p class="numberRun"></p> <br><br>
  17. 只有分隔符：<p class="numberRun2"></p> <br><br>
  18. 只有小数点：<p class="numberRun3"></p> <br><br>
  19. 无分隔符，无小数点：<p class="numberRun4"></p>
  20.  
  21. </body>
  22. <script>
  23. /**
  24. *  by Mantou qq:676015863
  25. *  数字滚动插件 v1.0
  26. */
  27. ;(function($) {
  28.   $.fn.numberAnimate = function(setting) {
  29.     var defaults = {
  30.       speed : 1000,//动画速度
  31.       num : "", //初始化值
  32.       iniAnimate : true, //是否要初始化动画效果
  33.       symbol : '',//默认的分割符号，千，万，千万
  34.       dot : 0 //保留几位小数点
  35.     }
  36.     //如果setting为空，就取default的值
  37.     var setting = $.extend(defaults, setting);
  38.  
  39.     //如果对象有多个，提示出错
  40.     if($(this).length > 1){
  41.       alert("just only one obj!");
  42.       return;
  43.     }
  44.  
  45.     //如果未设置初始化值。提示出错
  46.     if(setting.num == ""){
  47.       alert("must set a num!");
  48.       return;
  49.     }
  50.     var nHtml = '<p class="mt-number-animate-dom" data-num="{{num}}">\
  51.             <span class="mt-number-animate-span">0</span>\
  52.             <span class="mt-number-animate-span">1</span>\
  53.             <span class="mt-number-animate-span">2</span>\
  54.             <span class="mt-number-animate-span">3</span>\
  55.             <span class="mt-number-animate-span">4</span>\
  56.             <span class="mt-number-animate-span">5</span>\
  57.             <span class="mt-number-animate-span">6</span>\
  58.             <span class="mt-number-animate-span">7</span>\
  59.             <span class="mt-number-animate-span">8</span>\
  60.             <span class="mt-number-animate-span">9</span>\
  61.             <span class="mt-number-animate-span">.</span>\
  62.           </p>';
  63.  
  64.     //数字处理
  65.     var numToArr = function(num){
  66.       num = parseFloat(num).toFixed(setting.dot);
  67.       if(typeof(num) == 'number'){
  68.         var arrStr = num.toString().split("");  
  69.       }else{
  70.         var arrStr = num.split("");
  71.       }
  72.       //console.log(arrStr);
  73.       return arrStr;
  74.     }
  75.  
  76.     //设置DOM symbol:分割符号
  77.     var setNumDom = function(arrStr){
  78.       var shtml = '<p class="mt-number-animate">';
  79.       for(var i=0,len=arrStr.length; i<len; i++){
  80.         if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){
  81.           shtml += '<p class="mt-number-animate-dot">'+setting.symbol+'</p>'+nHtml.replace("{{num}}",arrStr[i]);
  82.         }else{
  83.           shtml += nHtml.replace("{{num}}",arrStr[i]);
  84.         }
  85.       }
  86.       shtml += '</p>';
  87.       return shtml;
  88.     }
  89.  
  90.     //执行动画
  91.     var runAnimate = function($parent){
  92.       $parent.find(".mt-number-animate-dom").each(function() {
  93.         var num = $(this).attr("data-num");
  94.         num = (num=="."?10:num);
  95.         var spanHei = $(this).height()/11; //11为元素个数
  96.         var thisTop = -num*spanHei+"px";
  97.         if(thisTop != $(this).css("top")){
  98.           if(setting.iniAnimate){
  99.             //HTML5不支持
  100.             if(!window.applicationCache){
  101.               $(this).animate({
  102.                 top : thisTop
  103.               }, setting.speed);
  104.             }else{
  105.               $(this).css({
  106.                 'transform':'translateY('+thisTop+')',
  107.                 '-ms-transform':'translateY('+thisTop+')',   /* IE 9 */
  108.                 '-moz-transform':'translateY('+thisTop+')',  /* Firefox */
  109.                 '-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */
  110.                 '-o-transform':'translateY('+thisTop+')',
  111.                 '-ms-transition':setting.speed/1000+'s',
  112.                 '-moz-transition':setting.speed/1000+'s',
  113.                 '-webkit-transition':setting.speed/1000+'s',
  114.                 '-o-transition':setting.speed/1000+'s',
  115.                 'transition':setting.speed/1000+'s'
  116.               }); 
  117.             }
  118.           }else{
  119.             setting.iniAnimate = true;
  120.             $(this).css({
  121.               top : thisTop
  122.             });
  123.           }
  124.         }
  125.       });
  126.     }
  127.  
  128.     //初始化
  129.     var init = function($parent){
  130.       //初始化
  131.       $parent.html(setNumDom(numToArr(setting.num)));
  132.       runAnimate($parent);
  133.     };
  134.  
  135.     //重置参数
  136.     this.resetData = function(num){
  137.       var newArr = numToArr(num);
  138.       var $dom = $(this).find(".mt-number-animate-dom");
  139.       if($dom.length < newArr.length){
  140.         $(this).html(setNumDom(numToArr(num)));
  141.       }else{
  142.         $dom.each(function(index, el) {
  143.           $(this).attr("data-num",newArr[index]);
  144.         });
  145.       }
  146.       runAnimate($(this));
  147.     }
  148.     //init
  149.     init($(this));
  150.     return this;
  151.   }
  152. })(jQuery);
  153.  
  154. $(function(){
  155.  
  156.   //初始化
  157.   var numRun = $(".numberRun").numberAnimate({num:'15343242.10', dot:2, speed:2000, symbol:","});
  158.   var nums = 15343242.10;
  159.   setInterval(function(){
  160.     nums+= 3433.24;
  161.     numRun.resetData(nums);
  162.   },3000);
  163.  
  164.  
  165.   var numRun2 = $(".numberRun2").numberAnimate({num:'15343242', speed:2000, symbol:","});
  166.   var nums2 = 15343242;
  167.   setInterval(function(){
  168.     nums2+= 1433;
  169.     numRun2.resetData(nums2);
  170.   },2000);
  171.  
  172.  
  173.   var numRun3 = $(".numberRun3").numberAnimate({num:'52353434.343', dot:3, speed:2000});
  174.   var nums3 = 52353434.343;
  175.   setInterval(function(){
  176.     nums3+= 454.521;
  177.     numRun3.resetData(nums3);
  178.   },4000);
  179.  
  180.   var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000});
  181.   var nums4 = 52353434;
  182.   setInterval(function(){
  183.     nums4+= 123454;
  184.     numRun4.resetData(nums4);
  185.   },3500);
  186.  
  187. });
  188. </script>
  189. </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

jQuery实现旋转幻灯片轮播效果（附代码）

jQuery插件实现表格隔行变色并且与鼠标进行交互

以上就是jquery实现数字滚动特效的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！