A-A+

高效的jquery数字滚动特效

2016年03月25日 JavaScript 暂无评论 阅读 862 次

本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下:

  • 有分隔符,有小数点:<div class="numberRun"></div> <br><br>
  • 只有分隔符:<div class="numberRun2"></div> <br><br>
  • 只有小数点:<div class="numberRun3"></div> <br><br>
  • 无分隔符,无小数点:<div class="numberRun4"></div>

运行效果图:

具体代码如下

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

参考:http://runjs.cn/detail/cdehp3cr

 

原文地址:http://www.jb51.net/article/76538.htm

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录