0

統計を表示するサイト用のグラフィックを作成し、countTo jQuery 関数を使用して、ゼロから「カウントアップ」するのが非常に見栄えがするようにしました。ただし、私が抱えている問題は、ページが読み込まれたときに countTo スクリプトが開始されることです。そのため、4 秒以内に統計が表示される場所までスクロールダウンしないと、アニメーション化にかかる +/- になります (再び、ページの読み込み時に発生します)、最終的な数字だけが表示され、アニメーションを見逃してしまいました. 私がやりたいのは、要素がウィンドウに表示された後にロードすることです。

ここで明らかな解決策が欠けている場合は申し訳ありません。私は独学であり、まだ学習曲線上にあります。どんな助けでも大歓迎です！

私が使用しているスクリプトは次のとおりです。

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.countTo = function(options) {
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
        increment = (options.to - options.from) / loops;

    return $(this).each(function() {
        var _this = this,
            loopCount = 0,
            value = options.from,
            interval = setInterval(updateTimer, options.refreshInterval);

        function updateTimer() {
            value += increment;
            loopCount++;
            $(_this).html(value.toFixed(options.decimals));

            if (typeof(options.onUpdate) == 'function') {
                options.onUpdate.call(_this, value);
            }

            if (loopCount >= loops) {
                clearInterval(interval);
                value = options.to;

                if (typeof(options.onComplete) == 'function') {
                    options.onComplete.call(_this, value);
                }
            }
        }
    });
};

$.fn.countTo.defaults = {
    from: 0,  // the number the element should start at
    to: 100,  // the number the element should end at
    speed: 1000,  // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 0,  // the number of decimal places to show
    onUpdate: null,  // callback method for every time the element is updated,
    onComplete: null,  // callback method for when the element finishes updating
};
})(jQuery);


jQuery(function($) {
    $('.timer').countTo({
        from: 0,
        to: 70218,
        speed: 4000,
        refreshInterval: 20,
        onComplete: function(value) {
            console.debug(this);
        }
    });
});
</script>
4

2 に答える 2

-1

window.scrollTop() がラッパーのオフセットと等しい場合、関数 countTo を呼び出さないのはなぜですか..

于 2016-01-11T15:46:28.673 に答える