7
我創建了一個很酷的圖像查看器，但卡在一個特定的部分：放大時平移圖像。這似乎是一個微不足道的問題，我已經嘗試了幾乎所有關於SO的類似問題的答案，但每次，某些工作不正確。我需要一雙新鮮的眼睛。如何使用jQuery正確地放大比其容器大的圖像？
我已經在我的開發服務器上臨時打開了一個URL。看看這個頁面：
[URL關閉]
接下來，向上移動鼠標滾輪來觸發變焦。我們到了。放大後，點擊並拖動以嘗試平移圖像。它正在平移，但有些不對。這是目前用於平移代碼：
var clicking = false;
var previousX;
var previousY;
$("#bigimage").mousedown(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
clicking = true;
});
$(document).mouseup(function() {
clicking = false;
});
$("#bigimage").mousemove(function(e) {
if (clicking) {
e.preventDefault();
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
$("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
$("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
previousX = e.clientX;
previousY = e.clientY;
}
});
我正在尋找解決方案具有以下特性：
- 平移在X和Y軸的方向正確
- 它不應該是可以在圖像的邊緣外部平移
- 合理流暢的平移
- 不錯：窗口大小調整不應引起任何問題
儘管我很欣賞我可以獲得的任何幫助，但請不要將我指向一個通用插件，我已經嘗試過太多，因此我正在尋找適用於特定場景的答案。我非常絕望，我甚至會爲滿足上述特徵的完美解決方案設置金錢賞金。
PS：請嘗試在Firefox或鏈接一個WebKit瀏覽器
你能描述什麼不工作，並提供小提琴嗎？據我所知，在沒有縮放的情況下，圖像已經出現了一些平移問題。我以前創建了一個背景平移腳本，只需移動鼠標，看到[這個答案]（http://stackoverflow.com/questions/7776843/mouse-on-left-of-screen-move-image-to-left - 鼠標右鍵同屏/ 7777153＃7777153）獲得靈感。 –
@RobW謝謝，但有了背景圖像的方法將是整個事情的一個重大改革，太多的依賴關係，我想整個放棄這個功能。我希望它可以使用滾動方法修復。 – Ferdy
正如你可以在我的小提琴中看到的那樣，平移並不困難，並且可以高效地完成。您的問題可能是由於編寫代碼而不考慮如何有效地實現它。縮放可以通過使用適當的邏輯和'background-size' CSS屬性輕鬆完成。我已經實施了平移。將兩者加在一起會產生所需的功能。如果你提供了一些相關的代碼，我可能會考慮看看它。 –