CSS轉換問題后的jQuery偏移量

Question

我正在制作一個移動網頁視圖，用於縮放和平移圖像; 使用CSS轉換（縮放）進行縮放和使用jQuery的“offset（）”函數進行平移。

我遇到的問題是，如果我在進行任何平移之前將圖像放大或縮小，圖像會跳轉到視圖的左上角或右下角（分別）。 初始跳轉后，平移和縮放恢復正常工作。 如果我在縮放前平移，則不會發生任何問題。

據我所知，在平移手勢（touchmove）期間圖像的偏移被改變時，我已經將問題縮小到非常接近的范圍。 我正在使用的事件監聽器類似於：

function touchmoveListener(event) {
    // get current touch event coordinates
    var curX = event.X;
    var curY = event.Y;

    // pan image by changing offset
    var curOffset = $("#image").offset();
    var newOffset = {
        left: curOffset.left + (curX - lastX),
         top: curOffset.top  + (curY - lastY)
    };
    $("#image").offset(newOffset);

    // store coordinates for future panning
    lastX = curtX;
    lastY = curY;
}

我已經調試了圖像的原始偏移量，新的計算偏移量（在分配之前），最后是分配后圖像的新偏移量。 當我得到zoom-then-pan問題（放大到2.5x，向左平移）時，我得到如下輸出：

original offset: {left: -215, top: -100}    // normal original location, okay!
computed offset: {left: -216, top: -100}    // pan 1px to the left, looks good!
assigned offset: {left: -441, top: -325}    // what the...? both off by 225px!

我真的不確定問題是什么，因為我正在記錄傳遞給offset（）函數的確切對象的坐標，但是顯然被分配的坐標是完全不同的。 有沒有人知道這里出了什么問題？ 任何輸入將不勝感激。

筆記：

• 我在CSS轉換錯誤（ http://bugs.jquery.com/ticket/8362 ）之后查看了jQuery offset（）並且我正在使用WebKit進行測試，但我遇到的問題顯然是設置了偏移量，沒有訪問它。
• lastX和lastY被初始化以響應touchstart事件（在touchmove觸發之前），因此它們不是問題

謝謝，

-Brendan

Answer 1

.offset（coordinates）更改目標元素relative對於文檔的位置。

如果#image的初始位置不是relative ，那么可以解釋當您首次初始化事件監聽器時看到的定位跳躍 - 圖像的位置相對於文檔而不是其初始位置被更改。