一个jquery数字滚动插件

<link rel="stylesheet" href="common/css/dataStatistics.css" media="all">

<div id="num"></div>

document.write('<s'+'cript type="text/javascript" src="'+getPath()+'/common/js/countNumber.js?d='+newdate+'"></s'+'cript>');

dataStatistics.css样式如下：

@charset "utf-8";
/* gaomingcong*/
@font-face{
  font-family: 'KlaviLigPla';
    src: url('../../font/LESLIE/LESLIE.eot');
    src: url('../../font/LESLIE/LESLIE.eot') format('embedded-opentype'),
         url('../../font/LESLIE/LESLIE.woff2') format('woff2'),
         url('../../font/LESLIE/LESLIE.woff') format('woff'),
         url('../../font/LESLIE/LESLIE.ttf') format('truetype'),
         url('../../font/LESLIE/LESLIE.svg#LESLIE') format('svg');
   font-weight: normal;
   font-style: normal;
}
.dataNums{ display: block;  height:100px; text-align:center;display: flex;}
 .dataNums .dataOne{ /* width:3.5vw;  */height:100px; /* margin: 0px 3px; */ text-align: center; flex:1;border-radius: 5px;float: left;list-style: none;font-family: 'KlaviLigPla';
 }
  .dataNums .dataLine{flex:0.4;}
 .dataNums .dataBoc {position: relative; width: 100%; height: 100%; overflow: hidden;}
 .dataNums .dataBoc .tt {position: absolute; top: 0;  left: 0; width: 100%;  height: 100%;}
 .dataNums .tt span{width:100%;height:100%; color:#51ffff;font-size: 5vw;line-height: 100px;float: left;
  /* background: linear-gradient(to bottom, #51ffff, #51ffff); */
       /*  -webkit-background-clip: text;
        -ms-background-clip: text;
        background-clip: text;
        color: transparent; */
        font-family: 'KlaviLigPla';
        font-weight: normal;
 }
 
 
   @media screen and (max-width: 1320px) {
   .dataNums {
       height:100px;
}
.dataNums .dataOne{
	width:3vw; height:100px; 
}
.dataNums .tt span{
	font-size: 5vw;line-height: 100px;
}
.dataLine{line-height: 100px;}
   }
   .dataNum1{
       position: absolute;
       top: 56%;
       width: 10%;
       float: left;
       /* padding-right: 4%; */
     color: #fff;
     font-size: 5vw;
     text-align: center;
     left: 17%;
     font-family: 'KlaviLigPla';
 }
 .dataNum2{
     position: absolute;
     top: 56%;
     width: 20%;
     float: left;
     color: #fff;
     font-size: 5vw;
     text-align: center;
     left: 40%;
     font-family: 'KlaviLigPla';
 }
 .dataNum3{
     position: absolute;
     top: 56%;
     width: 20%;
     float: left;
     padding-left: 5%;
     color: #fff;
     font-size: 5vw;
     text-align: center;
     left: 60%;
     font-family: 'KlaviLigPla';
 }
 .dataIcon{
     font-size: 5vw;
     float: left;
 }

countNumber.js内容如下：

;(function($,window,document){"use strict";var defaults={deVal:0,className:'dataNums',digit:''};function rollNum(obj,options){this.obj=obj;this.options=$.extend(defaults,options);this.init=function(){this.initHtml(obj,defaults);}}
rollNum.prototype={initHtml:function(obj,options){
var nameDeVal=options.deVal.split('');var strHtml='<ul class="'+options.className+' inrow">';var valLen=options.digit||(options.deVal+'').length;if(obj.find('.'+options.className).length<=0){for(var i=0;i<valLen;i++){if(nameDeVal[i]==","){strHtml+='<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" style=""><em style="color:#51ffff;" class="num0">,</em></div></div></li>';}
if(nameDeVal[i]=="."){strHtml+='<li class="dataOne dataLine" style="width:30px;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" style=""><em style="color:#51ffff;" class="num0">.</em></div></div></li>';}
if(nameDeVal[i]!=","&&nameDeVal[i]!="."){strHtml+='<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num10">,</span><span class="num11">.</span></div></div></li>';}}
strHtml+='</ul>';obj.html(strHtml);}
this.scroNum(obj,options);},scroNum:function(obj,options){var number=options.deVal;var $num_item=$(obj).find('.'+options.className).find('.tt');var h=$(obj).find('.dataBoc').height();$num_item.css('transition','all 2s ease-in-out');var numberStr=number.toString();if(numberStr.length<=$num_item.length-1){var tempStr='';for(var a=0;a<$num_item.length-numberStr.length;a++){tempStr+='0';}
numberStr=tempStr+numberStr;}
var numberArr=numberStr.split('');$num_item.each(function(i,item){setTimeout(function(){if(numberArr[i]==","){$num_item.eq(i).html(",")
$num_item.eq(i).css({'font-size':'69px','background':'none','transition':'none','color':'#51ffff'})}
if(numberArr[i]=='.'){$num_item.eq(i).html(".").css({'font-size':'69px','background':'none','transition':'none','color':'#51ffff'})}
if(numberArr[i]!=","&&numberArr[i]!="."){$num_item.eq(i).css('top',-parseInt(numberArr[i])*h-h*10+'px');}},i*150)});}}
$.fn.rollNum=function(options){var $that=this;var rollNumObj=new rollNum($that,options);rollNumObj.init();};})(jQuery,window,document);

<script type="text/javascript">
getRoll();
function getRoll(){
    $("#num").rollNum({deVal:addCommas(16888),});
}
//每隔三位小数加逗号
function addCommas(nStr)
{
    var kk="";
    nStr+='';
    if(nStr.length<9){
        kk= (Array(9).join('0') + nStr).slice(-9);
    }else{
        kk=nStr;
    }
    x = kk.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
</script>