jquery - 在视口中时使数字计数[重复]

Question

我正在尝试在视口内对数字进行计数，但目前，我使用的脚本会中断滚动计数。

我将如何让它忽略滚动并在它在视口内时计数？这需要在移动设备上运行，因此即使用户在触摸时滚动。它不能中断计数。

请看这里： 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);
    }
});

});

Answer 1

我认为，您的示例比您意识到的要复杂。您正在以一种非常不寻常的方式做事，在这里，使用自定义属性上的 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');
        }
    });
});

这里有很多。如果有任何不清楚的地方，请随时问我问题。