在视口中使数字递增

Make number count up when in viewport

本文关键字：数字 视口      更新时间：2023-11-28

我正试图让一个数字在视口内计数，但目前，我使用的脚本会在滚动时中断计数。

如何使其忽略滚动并在视口中计数？这需要在移动设备上运行，所以即使用户在触摸屏上滚动。它不能打断计数。

请参见此处：http://jsfiddle.net/Q37Q6/27/

(function ($) {
$.fn.visible = function (partial, hidden) {
    var $t = $(this).eq(0),
        t = $t.get(0),
        $w = $(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom,
        clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
    return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);

// Scrolling Functions
$(window).scroll(function (event) {
function padNum(num) {
    if (num < 10) {
        return "" + num;
    }
    return num;
}
var first = 25; // Count up to 25x for first
var second = 4; // Count up to 4x for second
function countStuffUp(points, selector, duration) { //Animate count
    $({
        countNumber: $(selector).text()
    }).animate({
        countNumber: points
    }, {
        duration: duration,
        easing: 'linear',
        step: function () {
            $(selector).text(padNum(parseInt(this.countNumber)));
        },
        complete: function () {
            $(selector).text(points);
        }
    });
}
// Output to div
$(".first-count").each(function (i, el) {
    var el = $(el);
    if (el.visible(true)) {
        countStuffUp(first, '.first-count', 1600);
    }
});
// Output to div
$(".second-count").each(function (i, el) {
    var el = $(el);
    if (el.visible(true)) {
        countStuffUp(second, '.second-count', 1000);
    }
});
});

我认为，您的示例比您意识到的要复杂。您正在以一种非常不寻常的方式进行操作，在这里，使用自定义属性上的jQuery animate方法作为计数器。这有点酷，但也让事情变得更复杂。我不得不添加一些内容来纠正这种情况。

  1. 我继续重写了你的可见插件，主要是因为我不知道你的插件在做什么。这个很简单！

  2. 当你的计数器变得可见时，它们会得到一个"计数"类，这样当它们已经在计数时，计数器就不会重新启动。

  3. 我将对具有自定义计数器动画的对象的引用保存到计数器的数据属性中。这一点至关重要：如果没有该引用，动画在离开屏幕时就无法停止。

  4. 我在step函数中做了一些异想天开的事情来跟踪还剩多少时间，这样即使计数器停止和启动，你也可以保持计数器以相同的速度运行。如果计数器运行半秒钟，并且设置为在整个动画中使用一秒钟，则如果它被中断并重新启动，则在重新启动计数器时只希望将其设置为半秒钟。

http://jsfiddle.net/nate/p9wgx/1/

(function ($) {
    $.fn.visible = function () {
        var $element = $(this).eq(0),
            $win = $(window),
            elemTop = $element.position().top,
            elemBottom = elemTop + $element.height(),
            winTop = $win.scrollTop(),
            winBottom = winTop + $win.height();
        if (elemBottom < winTop) {
            return false;
        } else if (elemTop > winBottom) {
            return false;
        } else {
            return true;
        }        
    };
})(jQuery);
function padNum(num) {
    if (num < 10) {
        return " " + num;
    }
    return num;
}

var $count1 = $('.first-count');
var $count2 = $('.second-count');
// Scrolling Functions
$(window).scroll(function (event) {
    var first = 25; // Count up to 25x for first
    var second = 4; // Count up to 4x for second
    function countStuffUp(points, selector, duration) {
        //Animate count
        var $selector = $(selector);
        $selector.addClass('counting');
        var $counter = $({
            countNumber: $selector.text()
        }).animate({
            countNumber: points
        }, {
            duration: duration,
            easing: 'linear',
            step: function (now) {
                $selector.data('remaining', (points - now) * (duration / points));
                $selector.text(padNum(parseInt(this.countNumber)));
            },
            complete: function () {
                $selector.removeClass('counting');
                $selector.text(points);
            }
        });
        $selector.data('counter', $counter);
    }
    // Output to div
    $(".first-count").each(function (i, el) {
        var el = $(el);
        if (el.visible() && !el.hasClass('counting')) {
            var duration = el.data('remaining') || 1600;
            countStuffUp(first, '.first-count', duration);
        } else if (!el.visible() && el.hasClass('counting')) {
            el.data('counter').stop();
            el.removeClass('counting');
        }
    });
    // Output to div
    $(".second-count").each(function (i, el) {
        var el = $(el);
        if (el.visible() && !el.hasClass('counting')) {
            var duration = el.data('remaining') || 1000;
            countStuffUp(second, '.second-count', duration);
        } else if (!el.visible() && el.hasClass('counting')) {
            el.data('counter').stop();
            el.removeClass('counting');
        }
    });
});

这里有很多。如果有什么不清楚的地方，请随时向我提问。

相关文章：