放大鼠标悬停图像，而不使用Jquery推动其他图像？

当您将鼠标悬停在Google图片所使用的图片缩略图上时，我正在尝试创建图片放大效果。但是，我遇到了一个问题，放大后的图像会根据放大图像的位置不断将其他图像推到另一个位置。放大鼠标悬停图像，而不使用Jquery推动其他图像？

这是我到目前为止有：

<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" >

来源

2011-07-13 user701510

您是否尝试过给它一个较高的z-index比休息和绝对位置？你绝对需要给它一个绝对的位置 - 这是你如何从DOM堆栈中移除它，并使其独立浮动，而不会使其他元素依赖于它。

或者，像我一样在这里你可以玩弄的克隆：

..删除旧的URL ..

更新更多的“图像”，平滑的动画，并删除了错误从使用前得到的图像卡..

http://jsfiddle.net/Swader/jKTVn/7/

来源

2011-07-13 07:17:25 Swader

@ user701510更新答案用简单的解决方案 – Swader

这种简单的解决方案徘徊的元素第二个时间后卡住。 –

因此，单词“简单”，我没有真正注意优化内存消耗，防止创建多个监听器等。我只是将它发布给OP，以便对如何完成它有一些基本的想法。但好的，我会修理小提琴。 – Swader

你一定要保持绝对定位从正常流动将其删除。不幸的是，这也意味着你需要跟踪位置。我可能会建议直接在顶部重复一个绝对定位的div，给它一个更高的Z-index，然后动画扩展该div。在鼠标移出时，将其闪烁，然后移除该元素。

<style> 
.over { 
    /* We use this for all of the generated hover-overs */ 
    position:absolute; 
    z-index:2; 
} 
img { 
    float:left; 
    position:relative; /* z-index doesn't work unless position is set */ 
    z-index:1; 
} 
</style> 

<div id="images"> 
    <img id="img1" src="foo.jpg"> 
    <img id="img2" src="bar.jpg"> 
    <img id="img3" src="baz.jpg"> 
</div> 

<script> 
    // First catch the mouse enter, grab position, make new element, append it, then animate 
    $("img").mouseenter(function() { 
    var top = $(this).position().top; 
    var left = $(this).position().left; 
    var src = $(this).attr("src"); 
    $('<div class="over" style="top:'+top+' left:'+left+'" src="'+src+'"></div>') 
    .appendTo($("#images")) 
    .animate({height:300,width:300},"fast"); 
    }); 

    // Note the mouseleave on the hovered element instead of the img 
    $(".over").mouseleave(function() { 
    var self = this; 
    $(this).animate({height:96,width:128},"fast",function() { 
     self.remove(); 
    } 
    }); 
</script>

来源

2011-07-13 07:22:16 Evan

嗯，我复制了这段代码，并在顶部包含了jquery文件，但是当我在图像上方漫游时没有任何反应。 – user701510

您在Google Images上获得的效果是在悬停灯箱上。您可以尝试Suckerfish-Hoverlightbox（请参阅demo）以获得此效果。移动一个图像的大小会导致其他图像的位置发生变化。

来源

2011-07-13 07:24:37

见工作演示：http://jsfiddle.net/rathoreahsan/Gsh6B/3/

你必须采取单独的DIV这些图像与应用div { display:inline }风格。您必须像我在演示中那样为这两个DIV以及012-Dposition:absolute设置z-index属性。最重要的是第二个img div上的left:130px，它将img保存在相同的位置。

见Swader很少的修改给出的解决方案的另一个工作演示：

http://jsfiddle.net/rathoreahsan/jKTVn/5/

来源

2011-07-13 07:39:21