css3实现数字滚动效果,jquery实现数字滚动效果

网页上如果有数字需要经常变动,又想让它比较明显,肯定是加个动画比较显眼,利用jquery的animate可以很容易的实现,不需要css3,因此可以兼容低版本的ie浏览器。

代码比较简单,没有整理成插件形式,暂时全堆在html里了。直接上代码:html>

        演示                function setNumber(dom, number){        var n = String(number),len = n.length;        //如果新的数字短于当前的,要移除多余的i        if(dom.find("i").length > len){            dom.find("i:gt(" + (len - 1) + ")").remove();        }                //移除千分位分隔符        dom.find("b").remove();        //开始填充每一位        for(var i=0;i");            }            var obj = dom.find("i").eq(i);            var y = -40 * parseInt(n.charAt(i), 10);            //加分隔符            if(i ").insertAfter(obj);            //利用动画变换数字            obj.animate({ backgroundPositionY:y+"px" }, 350);        }    };    $(function(){        //测试,每秒更新随机数        window.setInterval(function(){            setNumber($("#a"), Math.floor(Math.random() * 1000000));            setNumber($("#b"), Math.floor(Math.random() * 1000000));        }, 1000);    });    

代码与资源放在附件里了。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值