高效的jquery数字滚动特效【javascript】

/*数字滚动插件的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;}
有分隔符，有小数点：
 
只有分隔符：
 
只有小数点：
 
无分隔符，无小数点：
 /***  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) == 'number'){        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({'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); });