有没有办法使用 Jquery 在悬停时增大/缩小图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/883448/
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
Is there a way to grow/shrink an image on hover using Jquery?
提问by Kris Erickson
Is there a way, using Jquery to grow and then shrink an image (with animation so it looks smooth) on hovering without affecting the layout too much (I'm assuming the padding would have to shrink and then grow as well).
有没有办法，在悬停时使用 Jquery 增长然后缩小图像（带有动画，使其看起来平滑）而不会过多地影响布局（我假设填充必须先缩小然后再增长）。
With a bit of messing around, I finally came up with the solution, thanks to everyone who helped out.
经过一番折腾，我终于想出了解决方案，感谢所有提供帮助的人。
<html>
<head>
<style type="text/css">
.growImage {position:relative;width:80%;left:15px;top:15px}
.growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="growDiv">
<img class="growImage" src="image.jpg" alt="my image">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.growImage').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing');
}).mouseout(function(){
$(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing');
});;
});
</script>
</body></html>
回答by Steve Goodman
If you have your image positioned absolutely to the document in CSS, the rest of the page layout should not change when you animate your image.
如果您在 CSS 中将图像绝对定位到文档，则在为图像设置动画时，页面布局的其余部分不应更改。
You should be able to use jQuery's animate() function. The code would look something like this:
您应该能够使用 jQuery 的 animate() 函数。代码看起来像这样：
$("#yourImage").hover(
function(){$(this).animate({width: "400px", height:"400px"}, 1000);},
function(){$(this).animate({width: "200px", height:"200px"}, 1000);}
);
This example would grow the image with id=yourImage to 400px wide and tall when moused over, and bring it back to 200px wide and tall when the hover ends. That said, your issue lies more in HTML/CSS than it does jQuery.
这个例子会在鼠标悬停时将 id=yourImage 的图像扩大到 400px 宽和高，并在悬停结束时将其恢复到 200px 宽和高。也就是说，您的问题更多地在于 HTML/CSS 而不是 jQuery。
回答by Keith
The grow and shrink operations are easy with .animate:
增长和收缩操作很容易.animate：
$("#imgId").click(function(){
$(this).animate({
width: newWidth,
height: newHeight
}, 3000 );
});
The problem is how to do this without changing the layout of your page. One way to do this is with a copy that is positioned absolutely over the content. Another might be to absolutely position the image inside a relative fixed size div - though IE might have problems with that.
问题是如何在不更改页面布局的情况下执行此操作。一种方法是使用绝对位于内容上方的副本。另一个可能是将图像绝对定位在相对固定大小的 div 内 - 尽管 IE 可能会遇到问题。
Here is an existing library that seems to do what you're asking http://justinfarmer.com/?p=14
这是一个现有的图书馆，似乎可以满足您的要求http://justinfarmer.com/?p=14
回答by Ralph Cowling
You could wrap the image in a div (or whatever html element you think is appropriate, li etc) with it's overflow set to hidden. Then use jQuery .animateto grow that div, in whatever way you like.
您可以将图像包装在 div（或您认为合适的任何 html 元素，li 等）中，并将其溢出设置为隐藏。然后使用 jQuery .animate以您喜欢的任何方式扩展该 div。
So for example the htmlcould be
因此，例如html可能是
<div class="grower">
<img src="myimg.jpg" width="300" height="300" alt="my image">
</div>
Then your csswould look like
然后你的css看起来像
.grower {width:250px;height:250px;overflow:hidden;position:relative;}
So your image is essentially cropped by the div, which you can then grow on any event to reveal the full size of the image using jQuery
所以你的图像基本上是由 div 裁剪的，然后你可以在任何事件上增长以使用jQuery显示图像的完整大小
$('.grower').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){
$(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;
NB: You may want to add in additional css into your js, like an increased z-index to your div so that it can grow over the layout etc
注意：您可能希望在 js 中添加额外的 css，例如增加 div 的 z-index，以便它可以在布局上增长等
回答by drewjoh
Wanted to post a simple solution I'm using based on this post and information from Fox's answerto a related question.
想根据这篇文章和Fox对相关问题的回答中的信息发布一个我正在使用的简单解决方案。
Using an <img>like this: <img style="position: absolute;" class="resize" />
使用<img>这样的：<img style="position: absolute;" class="resize" />
You can do something similar to what's below. It will take the image's current width+height, make it 3 times bigger on hover (current * 3) and then bring it back on mouse out.
您可以执行类似于以下内容的操作。它将采用图像的当前宽度+高度，在悬停 ( current * 3) 时使其大 3 倍，然后在鼠标移开时将其恢复。
var current_h = null;
var current_w = null;
$('.resize').hover(
function(){
current_h = $(this, 'img')[0].height;
current_w = $(this, 'img')[0].width;
$(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300);
},
function(){
$(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300);
}
);
The current_Xvariables are global so they will be accessible in the mouse-out action.
这些current_X变量是全局的，因此可以在鼠标移开操作中访问它们。
回答by Pinny
-- HTML
-- HTML
<div class="container">
<img id="yourImg" src="myimg.jpg">
</div>
-- JS
-- JS
$( ".container" ).toggle({ effect: "scale", persent: 80 });
--More info
http://api.jqueryui.com/scale-effect/
回答by karim79
回答by jrharshath
If you really mean "without affecting the layout", you need to concentrate more on the CSS than on the javascript.
如果您的意思是“不影响布局”，那么您需要更多地关注 CSS 而不是 javascript。
The javascript involoved has already bean posted here... but to make sure that your layout is not spoiled, you will need to remove your image from the layout's flow.
javascript involoved 已经在此处发布了 bean...但是为了确保您的布局不被破坏，您需要从布局的流程中删除您的图像。
This can be done by positioning it absolutely, and setting its z-index to a larger value. However, this is not always the cleanest solution... so I would recommend you play around with "position:relative" in the parent DOM element, and "position:absolute" in the image's style.
这可以通过绝对定位来完成，并将其 z-index 设置为更大的值。然而，这并不总是最干净的解决方案......所以我建议你在父 DOM 元素中使用“position:relative”，在图像样式中使用“position:absolute”。
The interplay of relative and absolute is quite interesting. You should google it up.
相对和绝对的相互作用非常有趣。你应该谷歌一下。
cheers, jrh
干杯，jrh
