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（坐标）relative更改目标元素在文档中的位置。

如果#image的初始位置不是relative，则可以解释首次初始化事件侦听器时看到的定位跳转 - 图像的位置相对于文档而不是其初始位置发生变化。