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

【问题标题】：enlarging image on mouse hover without pushing other images using Jquery?在鼠标悬停时放大图像而不使用 Jquery 推送其他图像？
【发布时间】：2011-07-13 07:11:32
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css image

【解决方案1】：

您是否尝试过给它一个比其他的更高的 z-index 和一个绝对位置？你肯定需要给它一个绝对位置——这就是你如何将它从 DOM 堆栈中删除并让它独立浮动在那里而不使其他元素依赖它的方式。

或者，您可以像我在这里做的那样玩弄克隆：

.. 删除旧网址..

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

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

【讨论】：

@user701510 用简单的解决方案更新答案
这个简单的解决方案在第二次悬停元素后卡住了。
因此使用“简单”一词，我并没有真正关注优化内存消耗，防止创建多个侦听器等。我只是发布它以供 OP 了解如何可以办到。不过好吧，我会修好小提琴的。
@Ahsan 你去。随意使用鼠标，它现在不会坏了。
当前，当悬停颜色框时，它会连续放大和缩小。在我看来，它应该放大并在鼠标悬停事件时停止。 Mouseout 事件非常好。

【解决方案2】：

您绝对需要将其从正常流程中移除。不幸的是，这也意味着您需要跟踪位置。我可能会建议直接在顶部复制一个绝对定位的 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>

【讨论】：

嗯，我复制了这段代码并在顶部包含了 jquery 文件，但是当我将鼠标悬停在图像上时没有任何反应。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

您在 Google 图片上获得的效果是在悬停灯箱上。你可以试试Suckerfish-Hoverlightbox（见demo）来实现这个效果。改变一张图片的大小会导致其他图片的位置发生变化。

【讨论】：