溢出：隱藏;圖像滾動

我有一個像公共汽車窗口一樣的想法，一個固定的框架，約800px寬，一個視差城市的廣告牌上的內容間隔出來，所以當你在它們之間滾動時，它允許視差看起來像巴士在移動。內容將比像精靈這樣的窗口大得多，我會提出和回滾按鈕，將scrollBy（x數量，0）。我有一個工作視差腳本和3層的一個粗糙的城市景觀，一切正常。溢出：隱藏;圖像滾動

我撞牆了。我試圖在滾動1000px後清除scrollBy動畫。然後你再次點擊它，它又會變成1000px。這是我的功能。

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

到目前爲止，我只能清除它當它到達1000我試圖做1000 || 2000等，但在第一個之後它變得非常快並且不會清楚。

來源

2012-11-08 horribly_n00bie

不太確定你在這裏問什麼。也許你可以提供更相關的代碼？

我確實發現您的代碼存在潛在的問題。你打電話setInterval('scrollForward()', 10)這將導致scrollForward每10ms被調用一次。但是，對scrollForward的這些調用中的每一個都將創建更多間隔至scrollForward創建一種遞歸爆炸。您可能想要使用setTimeout或在此功能之外創建您的間隔。

此外，您可以將代碼更改爲：setInterval(scrollForward, 10)。刪除引號和parens使它更容易閱讀和管理。你甚至可以把複雜的，拉姆達功能，如：

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

編輯： 所以，如果你知道scrollForward移動項目10px的，你想讓它停止移動項目1000像素之後，那麼你只需要阻止它已經移動了很多。我仍然不知道你的代碼的實際結構，但它可能看起來像下面這樣：

(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-08 22:48:35

但是如何在img移動1000px之後清除間隔？ –

我編輯了我的答案，以包含它如何工作的例子。如果您發佈了更多的代碼，我可以更好地評論。 –

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-09 15:42:06

溢出：隱藏;圖像滾動

回答

相關問題