web前端|js教程
jquery,数字滚动
web前端-js教程
本文实例讲述了基于jquery数字滚动特效的代码，分为四种情况分享给大家供大家参考，具体如下：
看c c 源码软件,ubuntu自动打开软件,tomcat404的原因,新密网络爬虫,aes函数 php,万州百度seo排名优化lzw
有分隔符，有小数点：
g.711编码源码,vscode怎么看脚本,ubuntu还是cent,tomcat访问并发设置,爬虫常见软件,php引用其他文件,南岸seo优化自然搜索排名,在线生成php网站程序,网站手机端文章页模板lzw
只有分隔符：
如何删除网站源码文件,ubuntu换163源,小说爬虫并保存,php eteams,恩施seo推广lzw
只有小数点：
无分隔符，无小数点：
运行效果图：
具体代码如下
有分隔符，有小数点：
只有分隔符：
只有小数点：
无分隔符，无小数点：
/*** 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 =
\ 0\ 1\ 2\ 3\ 4\ 5\ 6\ 7\ 8\ 9\ .\
;//数字处理 var numToArr = function(num){num = parseFloat(num).toFixed(setting.dot);if(typeof(num) == umber){ var arrStr = num.toString().split(""); }else{ var arrStr = num.split("");}//console.log(arrStr);return arrStr; }//设置DOM symbol:分割符号 var setNumDom = function(arrStr){var shtml =
;for(var i=0,len=arrStr.length; i<len; i++){ if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){shtml +=
+setting.symbol+
+nHtml.replace("{{num}}",arrStr[i]); }else{shtml += nHtml.replace("{{num}}",arrStr[i]); }}shtml +=
;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({ ransform: ranslateY(+thisTop+),-ms-transform: ranslateY(+thisTop+), /* IE 9 */-moz-transform: ranslateY(+thisTop+), /* Firefox */-webkit-transform: ranslateY(+thisTop+), /* Safari 和 Chrome */-o-transform: ranslateY(+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, ransition: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); });
代码复制即可运行。
