Javascript 在鼠标悬停时放大图像而不使用 Jquery 推送其他图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6675329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
enlarging image on mouse hover without pushing other images using Jquery?
提问by user701510
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.
当您将鼠标悬停在 Google 图片使用的图片缩略图上时，我正在尝试创建图片放大效果。但是，我遇到了一个问题，即根据放大图像的位置，放大的图像不断将另一个图像推到另一个位置。
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" >
回答by Swader
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.
你有没有试过给它一个比其他的更高的 z-index 和一个绝对位置？你肯定需要给它一个绝对位置 - 这就是你如何从 DOM 堆栈中删除它并让它独立地浮动在那里而不让其他元素依赖它。
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..
更新了更多的“图像”，更流畅的动画，并删除了以前用来卡住图像的错误。
回答by Evan
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.
您绝对需要保持绝对位置，以将其从正常流程中移除。不幸的是，这也意味着您需要跟踪位置。我可能会建议直接在顶部复制一个绝对定位的 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>
回答by IT By Design
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.
您在 Google 图片上获得的效果在悬停灯箱上。您可以尝试使用 Suckerfish-Hoverlightbox（参见演示）来实现此效果。改变一张图像的大小会导致其他图像的位置发生变化。
回答by Ahsan Rathod
See the working demo: http://jsfiddle.net/rathoreahsan/Gsh6B/3/
查看工作演示：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:absoluteas I did in my demo. Most important is left:130pxon the 2nd img div that holds the img at the same position.
您必须在div { display:inline }应用了样式的单独 DIV 中拍摄这些图像。您必须像我在演示中所做的那样为DIV 和position:relative&设置 z-index 属性position:absolute。最重要的是left:130px在第二个 img div 上，它将 img 保存在同一位置。
See Another working demo of the solution given by Swaderwith little modifications:
请参阅由Swader稍加修改给出的解决方案的另一个工作演示：
