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设置为高于周围的元素。

Answer 2

听起来好像你应该看一下jQuery Lightbox插件。至于推出内容的放大图像的具体问题，需要从文档流程中删除（使用位置属性）......但这只是冰山一角。你想要实现的任务有很多活动部分，这就是为什么使用现有的javascript插件最好 - 当然是IMO。

您可能需要查看http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/和http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts。

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

2 个答案: