数字上下滚动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35158525/article/details/103622470

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>文字滚动</title>
    <style>
        #all {
            width: 100%;
            margin: 0 auto;
            background: #ffffff;
        }
        li {
            list-style-type: none;
        }
        #all .t_num i {
            width: 33px;
            height: 47px;
            display: inline-block;
            background: url(img/number1.png) no-repeat;
            background-position: 0 0;
        }
    </style>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/digitalScroll.js"></script>
    <script type="text/javascript">
        var sum = 13000;
        $(function () {
            setInterval(function () {
                show_num1(sum)
            }, 1000);
        });

        function show_num1(n) {
            sum = sum + 5;
            console.log(n);
            var it = $(".t_num1 i");
            var len = String(n).length;
            for (var i = 0; i < len; i++) {
                if (it.length <= i) {
                    $(".t_num1").append("<i></i>");
                }
                var num = String(n).charAt(i);
                //根据数字图片的高度设置相应的值
                var y = -parseInt(num) * 58;
                var obj = $(".t_num1 i").eq(i);
                obj.animate({
                    backgroundPosition: '(0 ' + String(y) + 'px)'
                }, 'slow', 'swing', function () {
                });
            }
        }

    </script>
</head>
<body>
<div id="all">
    <div class="amount">
        <ul>
            <li>
                <div class="am_num">
                    <div id="total">
                        <span class="t_num t_num1"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

封装的js文件

(function ($) {
    if (!document.defaultView || !document.defaultView.getComputedStyle) {
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function (elem, name, force) {
            if (name === 'background-position') {
                name = 'backgroundPosition';
            }
            if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if (!force && style && style[name]) {
                return style[name];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }
    var oldAnim = $.fn.animate;
    $.fn.animate = function (prop) {
        if ('background-position' in prop) {
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if ('backgroundPosition' in prop) {
            prop.backgroundPosition = '(' + prop.backgroundPosition + ')';
        }
        return oldAnim.apply(this, arguments);
    };

    function toArray(strg) {
        strg = strg.replace(/left|top/g, '0px');
        strg = strg.replace(/right|bottom/g, '100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        if(res){
            return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
        }
    }

    $.fx.step.backgroundPosition = function (fx) {
        if (!fx.bgPosReady) {
            var start = $.css(fx.elem, 'backgroundPosition');
            if (!start) {
                start = '0px 0px';
            }
            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.end);
            if(end){
                fx.end = [end[0], end[2]];
                fx.unit = [end[1], end[3]];
                fx.bgPosReady = true;
            }
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
    };
})(jQuery);