jQuery"悬停时放大”;无法相对于图片中心放大

jQuery "enlarge on hover" fails to enlarge relative to center of picture

本文关键字：放大 图片中心 相对于 quot 悬停 jQuery      更新时间：2023-09-26

我得到了一些很好的帮助来完成这项工作的基本部分，但现在我再次需要帮助：(下面的javascript应该是这样的，当你把鼠标悬停在图库中的缩略图上时，缩略图就会放大。我增加了高度和宽度，但我也改变了顶部和左侧的偏移来进行补偿，使其看起来像是图片相对于缩略图的中心在放大，而不是向右下角延伸。

    jQuery('.videogall-thumb').hover(function() {
    var currThumb = jQuery(this).attr('id');
    jQuery('.videogall-thumb[id="' + currThumb +'"]').stop().animate({height: "100", width: "118", left: "-12", top: "-15"}, "fast");
}, function() {
    jQuery('.videogall-thumb').stop().animate({height: "83", width: "98", left: "0", top: "0"}, "fast");
}
);

至少这是我所希望的。但缩略图仍然在向外延伸，而不是从中心放大。此外，正在放大的缩略图最终位于行上相邻缩略图的下方，而不是位于它们的上方，并且它会推送下面行上的相邻缩略图。明白我的意思了：http://oneworldyouthproject.org/tubepress-test/

我错过了什么？

您需要将position: relative设置为img元素，才能使left和top定位工作。

相关文章：