用jq实现的单个span为单个的数字动画

前言

书接上回,之前用jq实现了单个元素多个数字的动画,然后需求总是很强大的,他需要每个数字要有个图片背景,这就需要单个元素单个背景啦

废话不多说了,直接上代码:

    <style>
        .mt-number-animate {
            font-family: '微软雅黑';
            line-height: 40px;
            height: 40px;
            font-size: 36px;
            overflow: hidden;
            display: inline-block;
            position: relative;
        }

        .mt-number-animate .mt-number-animate-dot {
            width: 15px;
            line-height: 40px;
            float: left;
            text-align: center;
        }

        .mt-number-animate .mt-number-animate-dom {
            width: 20px;
            text-align: center;
            float: left;
            position: relative;
            top: 0;
        }

        .mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
            width: 100%;
            float: left;
        }

    </style>
    <div class="mt-number-animate">
        <div class="mt-number-animate-dom" data-num="1">
            <span class="mt-number-animate-span">0</span>
            <span class="mt-number-animate-span">1</span>
            <span class="mt-number-animate-span">2</span>
            <span class="mt-number-animate-span">3</span>
            <span class="mt-number-animate-span">4</span>
            <span class="mt-number-animate-span">5</span>
            <span class="mt-number-animate-span">6</span>
            <span class="mt-number-animate-span">7</span>
            <span class="mt-number-animate-span">8</span>
            <span class="mt-number-animate-span">9</span>
        </div>
        <div class="mt-number-animate-dom" data-num="3">
            <span class="mt-number-animate-span">0</span>
            <span class="mt-number-animate-span">1</span>
            <span class="mt-number-animate-span">2</span>
            <span class="mt-number-animate-span">3</span>
            <span class="mt-number-animate-span">4</span>
            <span class="mt-number-animate-span">5</span>
            <span class="mt-number-animate-span">6</span>
            <span class="mt-number-animate-span">7</span>
            <span class="mt-number-animate-span">8</span>
            <span class="mt-number-animate-span">9</span>
        </div>
        <div class="mt-number-animate-dom" data-num="5">
            <span class="mt-number-animate-span">0</span>
            <span class="mt-number-animate-span">1</span>
            <span class="mt-number-animate-span">2</span>
            <span class="mt-number-animate-span">3</span>
            <span class="mt-number-animate-span">4</span>
            <span class="mt-number-animate-span">5</span>
            <span class="mt-number-animate-span">6</span>
            <span class="mt-number-animate-span">7</span>
            <span class="mt-number-animate-span">8</span>
            <span class="mt-number-animate-span">9</span>
        </div>
    </div>

    <script>
        $(function () {
            var $wrap = $('.mt-number-animate');
            runAnimate($wrap);
        });
        //执行动画
        var runAnimate = function ($parent) {
            $parent.find(".mt-number-animate-dom").each(function () {
                var num = $(this).attr("data-num");
                var spanHei = $(this).height() / 10; //10为元素个数
                var thisTop = -num * spanHei + "px";
                if (thisTop != $(this).css("top")) {
                    $(this).css({
                        'transform': 'translateY(' + thisTop + ')',
                        '-ms-transform': 'translateY(' + thisTop + ')',
                        /* IE 9 */
                        '-moz-transform': 'translateY(' + thisTop + ')',
                        /* Firefox */
                        '-webkit-transform': 'translateY(' + thisTop + ')',
                        /* Safari 和 Chrome */
                        '-o-transform': 'translateY(' + thisTop + ')',
                        '-ms-transition': '1s',
                        '-moz-transition': '1s',
                        '-webkit-transition': '1s',
                        '-o-transition': '1s',
                        'transition': '1s'
                    });
                }
            });
        }
    </script>

这里我们巧妙的用了css3的transition,用来实现我们的动画过滤。以上

这是我的原创文章,如果觉得不错,可以打个赏~
0%