ITPub博客

首页 > IT职业 > IT职场 > jquery实现数字滚动效果

jquery实现数字滚动效果

IT职场 作者:54xx 时间:2021-09-09 10:04:16 0 删除 编辑

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


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

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>演示</title>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.7.1.min.js"></script>    <style>    .digits{        display:inline-block;        height:30px;        margin-right:50px;    }    .digits i{        background:url(numbers.png) no-repeat;        display:inline-block;        float:left;        height:30px;        width:18px;    }    .digits b{        background:url(numbers.png) no-repeat 0 -398px;        display:inline-block;        float:left;        height:30px;        width:10px;    }    </style>    <script>    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<len;++i){            //位数不足要补            if(dom.find("i").length < len){                dom.append("<i></i>");            }            var obj = dom.find("i").eq(i);            var y = -40 * parseInt(n.charAt(i), 10);            //加分隔符            if(i < len - 1 && (len - i - 1) % 3 == 0)                $("<b></b>").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);    });</script></head><body>    <div id="a" class="digits"></div>    <div id="b" class="digits"></div></body></html>



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




来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1976/viewspace-2815806/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-16

  • 博文量
    226
  • 访问量
    1618