[jQuery][插件][tgAnimationLabel]数字滚动

最新推荐文章于 2020-07-09 10:13:26 发布

原创最新推荐文章于 2020-07-09 10:13:26 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数字滚动 #插件 #tgAnimatio

jquery插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了jQuery插件tgAnimationLabel的使用，该插件用于实现数字滚动效果。通过在HTML中设置元素的data-end属性指定最终显示的数字，并在js中调用tgAnimationLabel.js进行配置，如延迟、滚动频率和增幅比例等参数。

效果图

这里写图片描述

这个插件完全没有样式！

接下来讲怎么调用

HTML

需要在显示数字的元素上加上 data-tg-num 值为最终显示的数字
然后初始值设置为0就行
这个动画是从当前值慢慢累加到最终值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>tgAnimationLabel</title>
</head>
<body>
    <button>Play</button>
    <p>
        <span data-tg-num="1890">0</span>
    </p>
    <script src="jquery.min.js"></script>
    <script src="tgAnimationLabel.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("span").tgAnimationLabel().play();
            });
        });
    </script>
</body>
</html>

js

tgAnimationLabel.js

+function ($, window, document, undefined) {
    var plugin = function (ele, opt) {
        this.$element = $(ele),
        this.defaults = {
            delay: 1000,
            fps: 50,
            range: .057,
        },
        this.options = $.extend({}, this.defaults, opt);
    }

    function update(ele, opt, numResult, tid) {
        // 获取当前数字
        var numCur = parseInt(ele.html());
        // 计算出下一次要显示的数字
        var numNext = numCur + parseInt(numResult * opt.range);
        if (numNext >= numResult) {
            numNext = numResult;
            window.clearInterval(tid);
        }
        ele.html(numNext);
    }

    plugin.prototype = {
        play: function () {
            var me = this;
            setTimeout(function () {
                var t = window.setInterval(function () {
                    update(me.$element, me.options, me.$element.data("tg-num"), t);
                }, me.options.fps);
            }, me.options.delay);
        },
    }

    $.fn.tgAnimationLabel = function (options) {
        var p = new plugin(this, options);
        return p;
    }
}(jQuery, window, document);