本文實例講述了基於jquery數字滾動特效的代碼,分為四種情況分享給大家供大家參考,具體如下:
運行效果圖:
具體代碼如下
<html> <head> <title>數字滾動插件</title> <meta charset="gb2312"> <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <style> /*數字滾動插件的CSS可調整樣式*/ .mt-number-animate{ font-family: '微軟雅黑'; line-height:40px; height: 40px;/*設置數字顯示高度*/; font-size: 36px;/*設置數字大小*/ overflow: hidden; display: inline-block; position: relative; } .mt-number-animate .mt-number-animate-dot{ width: 15px;/*設置分割符寬度*/ line-height: 40px; float: left; text-align: center;} .mt-number-animate .mt-number-animate-dom{ width: 20px;/*設置單個數字寬度*/ text-align: center; float: left; position: relative; top: 0;} .mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;} </style> </head> <body> <br><br> 有分隔符,有小數點:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小數點:<div class="numberRun3"></div> <br><br> 無分隔符,無小數點:<div class="numberRun4"></div> </body> <script> /** * by Mantou qq:676015863 * 數字滾動插件 v1.0 */ ;(function($) { $.fn.numberAnimate = function(setting) { var defaults = { speed : 1000,//動畫速度 num : "", //初始化值 iniAnimate : true, //是否要初始化動畫效果 symbol : '',//默認的分割符號,千,萬,千萬 dot : 0 //保留幾位小數點 } //如果setting為空,就取default的值 var setting = $.extend(defaults, setting); //如果對象有多個,提示出錯 if($(this).length > 1){ alert("just only one obj!"); return; } //如果未設置初始化值。提示出錯 if(setting.num == ""){ alert("must set a num!"); return; } var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\ <span class="mt-number-animate-span">0</span>\ <span class="mt-number-animate-span">1</span>\ <span class="mt-number-animate-span">2</span>\ <span class="mt-number-animate-span">3</span>\ <span class="mt-number-animate-span">4</span>\ <span class="mt-number-animate-span">5</span>\ <span class="mt-number-animate-span">6</span>\ <span class="mt-number-animate-span">7</span>\ <span class="mt-number-animate-span">8</span>\ <span class="mt-number-animate-span">9</span>\ <span class="mt-number-animate-span">.</span>\ </div>'; //數字處理 var numToArr = function(num){ num = parseFloat(num).toFixed(setting.dot); if(typeof(num) == 'number'){ var arrStr = num.toString().split(""); }else{ var arrStr = num.split(""); } //console.log(arrStr); return arrStr; } //設置DOM symbol:分割符號 var setNumDom = function(arrStr){ var shtml = '<div class="mt-number-animate">'; for(var i=0,len=arrStr.length; i<len; i++){ if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){ shtml += '<div class="mt-number-animate-dot">'+setting.symbol+'</div>'+nHtml.replace("{{num}}",arrStr[i]); }else{ shtml += nHtml.replace("{{num}}",arrStr[i]); } } shtml += '</div>'; return shtml; } //執行動畫 var runAnimate = function($parent){ $parent.find(".mt-number-animate-dom").each(function() { var num = $(this).attr("data-num"); num = (num=="."?10:num); var spanHei = $(this).height()/11; //11為元素個數 var thisTop = -num*spanHei+"px"; if(thisTop != $(this).css("top")){ if(setting.iniAnimate){ //HTML5不支持 if(!window.applicationCache){ $(this).animate({ top : thisTop }, setting.speed); }else{ $(this).css({ 'transform':'translateY('+thisTop+')', '-ms-transform':'translateY('+thisTop+')', /* IE 9 */ '-moz-transform':'translateY('+thisTop+')', /* Firefox */ '-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */ '-o-transform':'translateY('+thisTop+')', '-ms-transition':setting.speed/1000+'s', '-moz-transition':setting.speed/1000+'s', '-webkit-transition':setting.speed/1000+'s', '-o-transition':setting.speed/1000+'s', 'transition':setting.speed/1000+'s' }); } }else{ setting.iniAnimate = true; $(this).css({ top : thisTop }); } } }); } //初始化 var init = function($parent){ //初始化 $parent.html(setNumDom(numToArr(setting.num))); runAnimate($parent); }; //重置參數 this.resetData = function(num){ var newArr = numToArr(num); var $dom = $(this).find(".mt-number-animate-dom"); if($dom.length < newArr.length){ $(this).html(setNumDom(numToArr(num))); }else{ $dom.each(function(index, el) { $(this).attr("data-num",newArr[index]); }); } runAnimate($(this)); } //init init($(this)); return this; } })(jQuery); $(function(){ //初始化 var numRun = $(".numberRun").numberAnimate({num:'15343242.10', dot:2, speed:2000, symbol:","}); var nums = 15343242.10; setInterval(function(){ nums+= 3433.24; numRun.resetData(nums); },3000); var numRun2 = $(".numberRun2").numberAnimate({num:'15343242', speed:2000, symbol:","}); var nums2 = 15343242; setInterval(function(){ nums2+= 1433; numRun2.resetData(nums2); },2000); var numRun3 = $(".numberRun3").numberAnimate({num:'52353434.343', dot:3, speed:2000}); var nums3 = 52353434.343; setInterval(function(){ nums3+= 454.521; numRun3.resetData(nums3); },4000); var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000}); var nums4 = 52353434; setInterval(function(){ nums4+= 123454; numRun4.resetData(nums4); },3500); }); </script> </html>
代碼復制即可運行。
希望本文所述對大家JavaScript程序設計有所幫助。