高效的jquery数字滚动特效

本文实例讲述了基于jquery数字滚动特效的代码，分为四种情况分享给大家供大家参考，具体如下：
有分隔符，有小数点：<div class="numberRun"></div> <br><br>
只有分隔符：<div class="numberRun2"></div> <br><br>
只有小数点：<div class="numberRun3"></div> <br><br>
无分隔符，无小数点：<div class="numberRun4"></div>
运行效果图：
具体代码如下
<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））;}//initinit（$（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程序设计有所帮助。