JQ實現數字滾動顯示

/*文章數*/
.zsNum{line-height:24px; width:1000px; height:68px;overflow: hidden;margin: 10px auto;}
.zsNum span{float:left; height:50px; overflow: hidden; width:198px; margin:9px 0; color:#999; border-right:1px solid #e8e8e8;font-size:14px;  font-weight:900; text-align:center;}
.zsNum span.last {border-right:none;}
.zsNum span em,.zsNum span a{ font-weight:900; max-width:150px; height:68px; display:block; margin:0 auto;}
.zsNum span i{display:block;  width:45px; height:45px; float:left;margin-right: 10px}
.zsNum span i.num1{ background:url(/images/haha/icons.png) -61px 0; } 
.zsNum span i.num2{ background:url(/images/haha/icons.png) -109px  0; } 
.zsNum span i.num3{ background:url(/images/haha/icons.png) -157px  0; } 
.zsNum span i.num4{ background:url(/images/haha/icons.png) -205px  0; } 
.zsNum span i.num5{ background:url(/images/haha/icons.png) -253px  0; } 
.zsNum span label{display:block; text-align:left; padding-bottom:3px;}
.zsNum span strong i{display:block;  width:11px; height:15px; overflow: hidden; background:url(/images/haha/number.png); margin-right:0;}
.zsNum span strong{color:#666; font-size:20px; display:block;}

<!--用戶量-->
	<div class="zsNum"> 
        <span class="one">
            <em class="c999"> <i class="num1"></i>
                <label><script>document.write("當前用戶量");</script></label> 
                <strong id="userNums"><i style="background-position: 0px 0px;"></i></strong> 
            </em>
        </span>
        <span>
            <em class="c999">
                <i class="num2"></i>
                <label><script>document.write("總文章數");</script></label>
                <strong id="articleNums"><i style="background-position: 0px 0px;"></i></strong> 
            </em>
        </span>
        <span>
           <em>
            <i class="num3"></i>
            <label><script>document.write("文章總訪問量");</script></label>
            <strong id="viewNums">
                <i style="background-position: 0px 0px;"></i>
            </strong>
            </em>
        </span>
        <span>
            <em class="c999">
                <i class="num4"></i>
                <label><script>document.write("今日發表量");</script></label>
                <strong id="todayNums">
                    <i style="background-position: 0px 0px;"></i>
                </strong>
            </em>
        </span>
        <span class="last">
            <a class="c999">
                <i class="num5"></i>
                <label><script>document.write("最近7天發表量");</script></label>
                <strong id="weekNums">
                    <i style="background-position: 0px 0px;"></i>
                </strong>
            </a>
        </span>
	<input type="hidden" name="userNums" value="7">
	<input type="hidden" name="articleNums" value='48'>
	<input type="hidden" name="viewNums" value='541'>
	<input type="hidden" name="todayNums" value='0' >
	<input type="hidden" name="weekNums" value="30">
    </div>
<!--/用戶量-->

    showNumber($("input[name=userNums]").val(),'userNums');
    showNumber($("input[name=articleNums]").val(),'articleNums');
    showNumber($("input[name=viewNums]").val(),'viewNums');
    showNumber($("input[name=todayNums]").val(),'todayNums');
    showNumber($("input[name=weekNums]").val(),'weekNums');

function showNumber(number,objid){
        var strnum = number+'',//轉爲字符串
            numberlength = strnum.length,
            itembox = document.getElementById(objid),
            item = itembox.getElementsByTagName('i'),//當前數字個數
            itemlength = item.length,
            i;
        if (itemlength>numberlength) {//數字位數減少
            for ( i = 0; i < itemlength-numberlength; i++) {
                item[0].remove();//多餘數字刪除
            };
        }else if(itemlength<numberlength){
            for ( i = 0; i < numberlength-itemlength; i++) {
                itembox.innerHTML = '<i></i>'+itembox.innerHTML;//補全數字
            };
        }
        item = itembox.getElementsByTagName('i');//更新變量
        for (i = item.length - 1; i >= 0; i--) {
            itemNumberScroll(item[i],strnum.substr(i,1));
        };
    }
    function itemNumberScroll(item,number){
        var goalY = number*-15,
            time=500,
            t,
            unitTime=50,
            position = item.style.backgroundPosition.split(" "),
            positionY = position[1]!=undefined ? parseInt(position[1]) : 0,
            unitY=(goalY-positionY)/(time/unitTime);
        t = setInterval(function(){
            positionY+=unitY;
            item.style.backgroundPosition = '0px '+positionY+'px';
            if (unitY>=0 && positionY>=goalY) {
                item.style.backgroundPosition = '0px '+goalY+'px';
                clearInterval(t);
            }else if(unitY<=0 && positionY<=goalY){
                item.style.backgroundPosition = '0px '+goalY+'px';
                clearInterval(t);
            }
        },unitTime);
    }