如何在 JavaScript 中将图像放大 x%（使用 jQuery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13161339/
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
How to make an image x% bigger in JavaScript (with jQuery)
提问by Vivian River
I thought this ought to be a straightforward thing to do, but I don't see a clear way to do it.
我认为这应该是一件简单的事情，但我没有看到明确的方法。
I would like to make it so that when a user hovers the mouse over an image, the image becomes 10% bigger and then returns to its original size when the user moves the mouse away.
我想这样做，当用户将鼠标悬停在图像上时，图像变大 10%，然后在用户移开鼠标时恢复到其原始大小。
I think that I will want to use the jQuery hoverfunction, but I don't know what functions to pass into hover.
我想我会想要使用 jQueryhover函数，但我不知道要传递给hover.
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
回答by I Hate Lazy
jQuery lets you use +=and %. So those two together will do what you want.
jQuery 允许您使用+=和%。所以这两个一起会做你想做的。
$('.resizableImage').hover(makeBigger, returnToOriginalSize);
function makeBigger() {
$(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
$(this).css({height: "", width: ""});
}
回答by shiftoff
You could do it with CSS3 tranform property, for example
例如，您可以使用 CSS3 转换属性来实现
$('.resizableImage').hover(function(){
$(this).css("transform", "scale(1.1, 1.1)");
}, function(){
$(this).css("transform", "none");
});
回答by Michal Klouda
Without CSS3 you could simply get original size using .width()and .height()methods, store it in data attribute(s) and resize. On mouseout just restore the original values.
如果没有 CSS3，您可以简单地使用.width()和.height()方法获取原始大小，将其存储在数据属性中并调整大小。在 mouseout 上只需恢复原始值。
var hoverRatio = 1.1;
$('.resizableImage').hover(function() {
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
$(this).css({
width: $(this).width() * hoverRatio,
height: $(this).height() * hoverRatio
});
}, function() {
$(this).css({
width: $(this).data('width'),
height: $(this).data('height')
});
});?
See the DEMO.
见演示。
回答by Chris Andersson
You should use stop on the animation also so it doesn't get interrupted when the user moves out before the animation has finsihed
您也应该在动画上使用停止，这样当用户在动画完成之前移出时它不会被打断
html:
html：
<img src="http://placehold.it/350x150" class="resizableImage" width="350" height="150" />?
js:
js：
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
?
?
Here is a fiddle: http://jsfiddle.net/tWdAK/1/
这是一个小提琴：http: //jsfiddle.net/tWdAK/1/
回答by Bruno
Couldn't you just do this with css:
你不能只用 css 来做到这一点：
CSS
CSS
.resizable_img {
position: relative; // needed for z-index to work
width: 100%;
height: auto; // will resize image proportionally
}
.resizable_img:hover {
width: 120%;
z-index: 1; // place image on top
}
.img_container {
width: 25%;
position: relative;
overflow: visible; // stops images being shifted
float:left;
}
HTML
HTML
<div class="contents">
<div class="img_container">
<img class="resizable_img" src="img.jpg">
</div>
</div>
Fiddle here
在这里摆弄
回答by roacher
If you're not using inline styling, you can omit saving the old values in data and use style attr instead.
如果您不使用内联样式，则可以省略在数据中保存旧值并使用样式属性代替。
$('.element').hover(function() {
var el = $(this);
el.attr('style','width:'+el.width() * 1.1 + 'px;height:'+el.height() * 1.1 + 'px;');
}, function() {
$(this).removeAttr('style');
});?
