Question

所以我有一些帮助来创建一个从＆＃34; 0＆＃34;旋转的javascript元素。直到＆＃34; 190＆＃34;但是，当元素在视图中时会触发 - 所以我想 - 结果是滚动时数字只会增加....例如：

脚本：

    var totalShipped = 190;
    var shippedDisplay = 0;
    var shippedStep = totalShipped / (2 * 1000 / 100); // Animation duration 2 sec
    $(allInView);
$(window).scroll(allInView);


function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
    function allInView() {
      if (shippedDisplay > totalShipped)
        shippedDisplay = totalShipped;
      document.getElementById("shipped").innerHTML = Math.round(shippedDisplay);
      if (shippedDisplay < totalShipped) {
        shippedDisplay += shippedStep;
        setTimeout(animateShipped, 100);
      }
    }
    animateShipped();

HTML：

<span id="shipped"></span>

我想要的是元素自动从0 - 190旋转，当元素在浏览器的视图中而不是通过滚动操作....

现在就是这样： https://gyazo.com/6cd38177c44e97f0fa4f2b4d05ece5c3

理想情况下，我希望所有数字都在旋转，但让我们专注于＆＃34; 190＆＃34;目前，在浏览器的时候 - 任何提示或建议都会非常感激。

Answer 1

我建议在页面加载时设置一个计时器并使用此Jquery Visible插件在增量之前检查您的元素是否在视图中。

希望有所帮助。

Answer 2

假设您的isScrolledIntoView（elem）函数正常运行，您可以执行以下操作：

window.setInterval(function(){
  if(isScrolledIntoView($('#shipped'))){
    allInView();
  }
}, 100);

它的作用是每隔100毫秒检查你的跨度是否可见，然后调用你的allInView（）函数，然后动画旋转。

如果您不希望任何开销，如果该元素不可见，您可以相应地停用该间隔：

var interval = null;
function checkForAnimation(){
    if(isScrolledIntoView($('#shipped'))){
        interval = window.setInterval(function(){
                allInView();
            }, 100);
        }
    else{
        clearInterval(interval);
    }
}
$(window).scroll(checkForAnimation);

Answer 3

你可以使用setInterval（allInView（），2）;

当元素在视图中时加载Javascript

3 个答案: