Javascript滾動圖像邊緣檢測

Question

目前我正在嘗試一些我想創建的圖像縮放/滾動腳本，是的我知道有插件那樣做，但我正在開發這個輕量級版本和學習。我現在的主要問題是，我不確定如何將圖像滾動限制爲僅限圖像的寬度和高度。我想設置我的腳本來阻止圖像滾動時，當用戶獲得ceartin寬度或圖像的高度，以停止滾動出格的圖像。下面是我的腳本的小提琴，任何建議或提示，以幫助我在正確的方向移動將不勝感激click here to go to fiddle

Answer 1

我建立了一個這樣一個前一陣子。

原則是你聽三個事件：mousedown,mouseup和mousemove。

首先，最好使用div，然後將圖像設置爲div的background-image。這使您可以使用background-position在div內移動圖像。我們將這稱爲div#container。

在mousedown上，記錄了圖像背景位置的座標。在頁面加載時，這些將是0 0（除非你已經告訴它是別的東西，我們假設你沒有）。當mousedown事件被觸發時，這實際上是拖動操作的開始，因此您可能需要設置某種draggingStarted變量。

對mousemove，你想檢查draggingStarted是否爲真。如果是，則計算鼠標光標移動的相對距離並相應地更改背景圖像座標。

對mouseup您想要將draggingStarted變量設置爲false。這是因爲如果mousemove事件被觸發，圖像位置保持不變。

現在，您所問的問題是，迄今爲止給出的解決方案允許背景位置座標超過圖像，所以我們會得到部分空白的#container。 這個問題的解決方案是記錄圖像的尺寸，然後當你計算移動背景圖像的距離有多遠時（在mousemove函數中），檢查新的背景圖像座標是否在圖像的邊界。如果是，請不要允許！