鼠标悬停时放大图像而不使用Jquery推送其他图像？ [英] enlarging image on mouse hover without pushing other images using Jquery?

问题描述

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

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

推荐答案

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

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/

这篇关于鼠标悬停时放大图像而不使用Jquery推送其他图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！