Question

我正在尝试实现一种效果，其中图像（可以是不同大小）放大，并在其周围出现边框。非缩放图像的最大尺寸限制为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/

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

Answer 1

你试图得到你的$（'。image-container'）的偏移，但它的填充永远不会改变，你只改变'.image-block'的填充，所以当你console.log做这个

$('.image-block').offset().top;
$('.image-block').offset().top;

在将CSS类应用于它之后获取更新的div偏移量

1 个答案: