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进行测试，但我遇到的问题显然是设置偏移量而不是访问它。 / LI>
• lastX和lastY被初始化以响应touchstart事件（在touchmove触发之前），因此它们不是问题

谢谢，

-Brendan

Answer 1

.offset(coordinates)会将目标元素relative的位置更改为文档。

如果#image的初始位置不是relative，则可以解释您在首次初始化事件监听器时看到的定位跳跃 - 图像的位置正在相对于文档而不是其初始位置进行更改。