1

我正在尝试实现一种效果，其中图像（它可以具有不同的大小）在悬停时缩放，并在其周围出现边框。非缩放图像的最大尺寸限制为 250 像素，缩放后的图像最大为 550 像素。

我通过在 mouseenter 上将一个类应用于 div 并在 mouseleave 上将其删除来做到这一点。这工作得很好，但问题是我想检测 div 是否部分离开屏幕。为此，我需要转换后的 div 的偏移量：

$(document).ready(function () {

    $('.image-container').on('mouseenter', function () {

        var y = $(this).offset().top,
            x = $(this).offset().left;

        console.log('old', x, y);

        $(this).addClass('image-hover');

        y = $(this).offset().top;
        x = $(this).offset().left;

        console.log('new', x, y);
    });

    $('.image-container').on('mouseleave', function () {

        $(this).removeClass('image-hover');
    });
});

如果您查看下面的 jsfiddle，我会在添加类后得到旧的偏移量。

http://jsfiddle.net/6JZCW/14/

那么，如何获得更新的偏移量？有没有更好的方法来做我想要实现的目标？

4

1 回答 1

1

您正在尝试获取 $('.image-container') 的偏移量，但它的填充永远不会改变，您只更改 '.image-block' 的填充，所以当您使用 console.log 时执行此操作

$('.image-block').offset().top;
$('.image-block').offset().top;
于 2013-10-09T19:33:47.033 回答