当您将鼠标悬停在图像缩略图上(例如 Google 图片正在使用的缩略图)时,我正在尝试创建图像放大效果。但是,我遇到了一个问题,即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置。
这是我到目前为止所拥有的:
<style>
img{float:left;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#I1").mouseover(function(){
$("#I1").animate({height:300,width:300},"fast");
});
$("#I1").mouseout(function(){
$("#I1").animate({height:96,width:128},"fast");
});
});
</script>
<img id="I1" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
<img id="I2" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
你是否尝试过给它一个比其他的更高的 z-index 和一个绝对位置?你肯定需要给它一个绝对位置 - 这就是你如何将它从 DOM 堆栈中删除并使其独立浮动在那里,而不使其他元素依赖于它。
或者,您可以像我在这里那样使用克隆:
..删除了旧网址..
更新了更多“图像”、更流畅的动画,并删除了之前导致图像卡住的错误。
http://jsfiddle.net/Swader/jKTVn/7/ http://jsfiddle.net/Swader/jKTVn/7/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)