javascript - 如何将 DIV jquery 动画限制为容器 DIV ..？

Question

我有一个包含一堆缩略图的页面。我使用带有背景图像的 DIV 作为缩略图。当我悬停时，我有一个 jQuery 脚本，它可以为 DIV 设置动画以将 div 扩展到图像的整个宽度。扩展是全方位的，它从中心扩展，带有一些边距和顶部/左侧定位。

问题是:如果我将鼠标悬停在位于页面顶部的图像上，图像会扩展，但我们只能看到下半部分，因为它扩展到了视口(viewport)之外。

您知道将扩展限制在视口(viewport)或包含 DIV 的解决方案吗？

这是我的代码:

$("div.thumbnail").hover(function() {

    $margintop = '-70px';  // half the height of big img minus margins/paddings
    $marginleft = '-115px';  // half the width of big img minus margins/paddings
    $width = '348px';
    $height = '258px';

    $(this).css({'z-index' : '1000'});
    $(this).addClass("hover").stop().animate({
        marginTop: $margintop,
        marginLeft: $marginleft,
        scrollTop: 0,
        width: $width,
        height: $height
    }, 200);

    } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop().animate({
            marginTop: '10px',
            marginLeft: '10px',
            top: '0',
            left: '0',
            width: '100px',
            height: '100px'
        }, 150);
});

Answer 1

我会查看包装 div 的属性顶部、左侧、右侧和底部，其中图像不会显示在外面，看看图像最大尺寸位置是否会超过这些坐标并将图像相应地移动到超出边界的像素。