Question

有很多不同的计数器脚本，我不知道从哪里开始，什么是过度杀伤，什么不是。

我正在寻找一个简单的计数器脚本，当目标元素首次出现在屏幕上时会触发（例如，在滚动到视图中之前不会触发）

我的想法是，当滚动到视图中时，我需要做的就是让元素进行动画/计数，给它一个counter类。

例如，html将是：

<span class="counter">99</span><span class="counter">55</span>

首先，这些元素将设置为visibility:hidden，直到滚动到视图中。然后，它们将从0增加到文本节点的值（在这种情况下为99和55），并在达到该值时停止。某种缓和效果可能是可取的，但不是必须的（例如，当达到该值时开始快速和慢速）

提前致谢。只是寻找最简单的解决方案。

Answer 1

这是一个完整的代码，用于您的目的：

function isElementVisible($elementToBeChecked)
{
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    var TopElement = $elementToBeChecked.offset().top;
    var BotElement = TopElement + $elementToBeChecked.height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
}

$(window).scroll(function () {
    $( ".counter" ).each(function() {
    isOnView = isElementVisible($(this));
        if(isOnView && !$(this).hasClass('Starting')){
           $(this).addClass('Starting');
           startTimer($(this));
        }
    });
});

function startTimer($this) {
    setTimeout(function(){
        $this.html($this.html() - 1);
        startTimer($this);
    }, 1000); 
}

isElementVisible函数有助于找出是否每次滚动后屏幕上都会出现一个控件。

然后你调用每个滚动的这个函数，如果显示一个.counter元素，那么只使用startTimer函数为THIS元素启动计时器。

!$(this).hasClass('Starting')被添加到代码中以防止不必要的呼叫功能，当计时器在之前启动并一次又一次地滚动它。当计时器第一次启动时，Starting类将添加到元素中，并在下次被跳过。

<强>＆GT;＆GT;＆GT; JSFiddle Sample

你可以看到每个计时器只在看到时开始，其他计数器在看到之前都不会启动。

Answer 2

看起来您问题的一部分已经有了答案：Start executing jQuery function when I scroll to a specific <div>

关于这个问题的答案有一个jsfiddle，可以帮助你入门。这是在start_count

中编写一个简单的计数器脚本的问题

出现简单的jquery计数器

2 个答案: