放大鼠標懸停圖像，而不使用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