javascript - 使用 JQuery 在悬停时放大图像的问题

Question

一堆代码看起来确实有效，唯一的问题是过渡不是很顺利。知道如何调整代码以使效果更流畅吗？而且，当图像放大时，图像下方和旁边的所有内容似乎都被推开以为放大腾出空间，知道我如何才能阻止这种情况并让图像在放大时与周围的内容重叠吗？另外，不是每次我上传新图像并想要这种效果时都为每个图像插入该代码，而是如何使 javascript 代码自动应用于新图像，而不是每次都手动将 javascript 应用于它？最后，我如何在视频/小部件上使用它而不仅仅是图像？ (我使用的是 Dreamweaver CS5)。

$("img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
$(this).stop().animate({ height: $.data(this,'size').height*1.2,
width: $.data(this,'size').width*1.2 });
}, function() {
$(this).stop().animate({ height: $.data(this,'size').height,
width: $.data(this,'size').width });
});

Answer 1

如果您希望图像在调整大小时与周围的任何元素重叠，您将不得不使用 CSS 来定位元素的相对、绝对或固定位置，然后将图像的 z-index 设置为高于周围的元素。