CSS转换问题后的jQuery偏移量答案

【问题标题】：jQuery Offset after CSS Transformation IssueCSS转换问题后的jQuery偏移量
【发布时间】：2013-07-01 15:46:18
【问题描述】：

我正在制作用于缩放和平移图像的移动网络视图；使用 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;
}

我已经控制台记录了图像的原始偏移量、新计算的偏移量（分配之前），最后是分配后图像的新偏移量。当我遇到缩放然后平移问题（放大到 2.5 倍，向左平移）时，我得到如下输出：

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 触发之前），因此它们没有问题

谢谢，

-布伦丹

【问题讨论】：

使用 CSS 转换进行平移有什么问题？
@zeroflagL CSS 平移没有问题（它确实使缩放/平移工作没有错误），只是个人的隧道眼光来弄清楚为什么 offset() 方法不起作用:-P 谢谢输入！
如何缩放？通过手势、控件或点击/触摸？
手势（用于捏缩放）和触摸（用于双击缩放）

标签： javascript jquery css

【解决方案1】：

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

如果#image 的初始位置不是relative，这可能解释了您在第一次初始化事件侦听器时看到的定位跳跃 - 图像的位置相对于文档而不是它的初始位置。

【讨论】：