Question

当您将鼠标悬停在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" >

Answer 1

你试过给它一个比其余的更高的z指数和绝对位置吗？你肯定需要给它一个绝对的位置 - 这就是你如何从DOM堆栈中删除它并让它独立浮动，而不会让其他元素依赖它。

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

..删除旧网址..

更新了更多“图片”，更流畅的动画，并删除了之前用于使图像卡住的错误..

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

Answer 2

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

<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

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

Answer 4

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

您必须在应用了div { display:inline }样式的单独DIV中拍摄这些图像。您必须为两个DIV和position:relative＆amp;设置z-index属性。正如我在演示中所做的那样position:absolute。最重要的是第二个img div上的left:130px，它将img保持在同一位置。

请参阅Swader给出的解决方案的另一个工作演示，稍作修改：

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

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

4 个答案: