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);
    }





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值