0

我有一个想法，将公共汽车窗口作为一个固定框架，大约 800 像素宽，一个视差城市，广告牌上的内容隔开，所以当你在它们之间滚动时，它可以让视差看起来像公共汽车在移动。内容将比窗口大得多，就像精灵一样，我将提出滚动的前进和后退按钮（x 数量，0）。我有一个工作视差脚本和一个粗略的 3 层城市景观，它们都可以正常工作。

我撞到了一堵墙。我试图在滚动 1000 像素后清除 scrollBy 动画。然后你再次点击它，它又是 1000 像素。这是我的功能。

function scrollForward() {
    window.scrollBy(5,0);
    scrollLoop = setInterval('scrollForward()',10);
}

到目前为止，我只能在达到 1000 时清除它。我尝试过 1000 || 2000 等，但在第一个之后它真的很快而且不会清除。

4

2 回答 2

0

Excelsior https://stackoverflow.com/users/66580/majid-fouladpour为其他有不同问题的人写了一段很棒的代码。这对另一个人想要的不太合适，但对我来说是完美的。

function scrollForward() {
    var scrolledSoFar = 0;
    var scrollStep = 75;
    var scrollEnd  = 1000;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar >= scrollEnd ) clearInterval(timerID);
    }, 10);
}

function scrollBack() {
    var scrolledSoFar = 0;
    var scrollStep = -75;
    var scrollEnd  = -1000;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar <= scrollEnd ) clearInterval(timerID);
    }, 10);
}

现在进行第二步，弄清楚如何将此内容动画放在框架后面。

于 2012-11-09T15:42:06.650 回答
0

不太清楚你在这里问什么。也许您可以提供更相关的代码？

我确实看到您的代码存在潜在问题。您调用setInterval('scrollForward()', 10)这将导致scrollForward每 10 毫秒调用一次。然而，这些调用中的每一个scrollForward都会创建更多的间隔来scrollForward创建一种递归的爆炸式增长。您可能希望setTimeout在此功能之外使用或创建间隔。

另外，顺便说一句，您可以将代码更改为简单的：setInterval(scrollForward, 10). 删除引号和括号使其更易于阅读和管理。您甚至可以放置复杂的 lambda 函数，例如：

setInterval(function() {
   scrollForward();
   // do something else
 }, 10);

编辑： 因此，如果您知道 scrollForward 将项目移动 10px，并且您希望它在将项目移动 1000px 后停止，那么您只需要停止它已经移动了那么多。我仍然不知道您的代码的实际结构，但它可能类似于以下内容：

(function() {
  var moved_by = 0;
  var interval = null;

  var scrollForward = function() {
     // move by 10px
     moved_by += 10;
     if (moved_by === 1000 && interval !== null) {
        clearInterval(interval);
     }
  };

  var interval = setInterval(scrollForward, 10);
})();

如果您想在 1000 或 2000 之后清除它，您只需if相应地调整语句。我希望这会有所帮助。

于 2012-11-08T22:48:35.060 回答