在鼠标 hover 上放大图像而不使用 Jquery 推送其他图像？

Question

I am trying create the image enlargement effect when you hover your mouse over an image thumbnail like the one that Google Images is using. However, I am encountering a problem where the enlarged image keeps pushing the other image to another location depending on the enlarged image's position.

Here's what I have so far:

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

Answer 1

Have you tried giving it a higher z-index than the rest and an absolute position? You definitely need to give it an absolute position - this is how you remove it from the DOM stack and make it float there independently without making other elements depend on it.

Or, you can play around with clones like I did here:

.. removed old url..

Updated with more "images", smoother animation, and removed the bugs from before that used to get an image stuck..

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

Answer 2

You definitely need to keep it absolutely positioned to remove it from the normal flow. Unfortunately, this also means you need to track the position. I might recommend duplicating an absolutely positioned div directly on top, give it a higher z-index, then animating the expansion of that div. On mouseout, shink it and then remove the element.

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

Answer 3

The effetcs that you get on Google Images is on hover lightbox. You can try Suckerfish-Hoverlightbox (see the demo ) for this effect. Shifting the size of one image will result in change in position of other images.

Answer 4

See the working demo: http://jsfiddle.net/rathoreahsan/Gsh6B/3/

You have to take these images in separate DIVs with div { display:inline } style applied. You have to set z-index property for the both DIVs and the position:relative & position:absolute as I did in my demo. Most important is left:130px on the 2nd img div that holds the img at the same position.

See Another working demo of the solution given by Swader with little modifications:

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