使用jQuery中的.offset()缩放图像

Question

我有一段非常简单的代码。它通过改变图像的max-width来制造放大的假象。我使用jQuery的offset()方法和鼠标坐标来让用户可以移动图像。 http://jsfiddle.net/tmyie/YcbDM/

$('.image-container img').mouseover(function () {
    $(this).css('max-width', '200%');
    $(this).mousemove(function (e) {
        $(this).offset({
             top: e.pageY - 300,
            left: e.pageX - 300   
        });
    });
 });

这个功能正好符合我的要求，但是我想要反转pan。目前，如果你将光标向上移动，你会看到图片的下半部分，反之亦然。我尝试过反转偏移量，像这样:

             top: e.pageY + 300,
            left: e.pageX + 300 

但是这个图片完全被隐藏了。

如果可能的话，我想避免使用插件来解决这个问题。

- user1469270

Answer 1

反转 e.pageX 和 e.pageY 似乎能很好地实现您想要的效果。

$('.image-container img').mouseover(function () {
    $(this).css('max-width', '200%');
    $(this).mousemove(function (e) {
        $(this).offset({
             top: -e.pageY,
            left: -e.pageX

        });
    });
 });

http://jsfiddle.net/zSjL9/

- Pete TNT

---

那太完美了。为什么我必须忽略容器的宽度（因此不要使用“-300”）？ - user1469270

当你在容器的外边缘（右边或底部）时，你通过偏移图像的方式来达到-(容器宽度)的效果。 - Pete TNT