有分隔符，有小数点：<p class="numberrun"></p> <br><br>
只有分隔符：<p class="numberrun2"></p> <br><br>
只有小数点：<p class="numberrun3"></p> <br><br>
无分隔符，无小数点：<p class="numberrun4"></p>
运行效果图：
具体代码如下
<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> 有分隔符，有小数点：<p class="numberrun"></p> <br><br> 只有分隔符：<p class="numberrun2"></p> <br><br> 只有小数点：<p class="numberrun3"></p> <br><br> 无分隔符，无小数点：<p class="numberrun4"></p> </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 = '<p 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>\ </p>'; //数字处理 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 = '<p 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 += '<p class="mt-number-animate-dot">'+setting.symbol+'</p>'+nhtml.replace({{num}},arrstr[i]); }else{ shtml += nhtml.replace({{num}},arrstr[i]); } } shtml += '</p>'; 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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery实现旋转幻灯片轮播效果（附代码）
jquery插件实现表格隔行变色并且与鼠标进行交互
以上就是jquery实现数字滚动特效的详细内容。