jquery 动态数字滚动
  • 分享到微信朋友圈
    X

本文介绍如何使用jquery制作动态数字滚动效果

主要js:

<script>
    (function ($) {
        $.fn.numberRock = function (options) {
            var defaults = {
                speed: 24,
                count: 100
            };
            var opts = $.extend({}, defaults, options);

            var div_by = 100,
        count = opts["count"],
        speed = Math.floor(count / div_by),
        sum = 0,
        $display = this,
        run_count = 1,
        int_speed = opts["speed"];
            var int = setInterval(function () {
                if (run_count <= div_by && speed != 0) {
                    $display.text(sum = speed * run_count);
                    run_count++;
                } else if (sum < count) {
                    $display.text(++sum);
                } else {
                    clearInterval(int);
                }
            }, int_speed);
        }

    })(jQuery); 

</script>