Question

我有一个非常简单的代码。它会更改图像的max-width以提供放大的幻觉。我使用jQuery＆＃39; offset()和鼠标的坐标，这样用户就可以平移图像。

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

这完全符合我的要求，但是，我希望平底锅颠倒。目前，如果向上移动光标，则会看到图像的下半部分，反之亦然。我试过逆转偏移，如下所示：

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

但图像已从视图中完全删除。

如果可能的话，我想避免使用插件。

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/

使用.offset（）使用jQuery缩放图像

1 个答案: