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

发布于 2024-12-22 22:18:18 字数 625 浏览 1 评论 0原文

这堆代码似乎确实有效，唯一的问题是过渡不是很顺利。知道如何调整代码以使效果更平滑吗？而且，当图像放大时，图像下方和旁边的所有内容似乎都被推开，以便为放大腾出空间，知道如何阻止这种情况并使图像在放大时与周围的内容重叠吗？另外，不是每次上传新图像并想要这种效果时都为每个图像插入该代码，而是如何使 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 });
});

原文

The bunch of code does seem to work, only thing is that the transition is not very smooth. Any Idea how to tweak up the code to make the effect more smooth? and also, when the image enlarges, all the content below and beside the image seems to be pushed away to make room for the enlargement, any idea how I can stop this and just make the image overlap the content around it on enlargement? Also, instead of inserting that code for each image every time I upload a new image and want that effect, how do I make the javascript code automatically apply to the new image instead of manually applying the javascript to it each time? Finally, how do I use this on videos/widgets instead of just images? (I’m using 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 });
});

分享到QQ

分享到微博