使用 jquery/javascript 在点击时增加/减少 css 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18890095/
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
increase/decrease css width on click with jquery/javascript
提问by valerio0999
I would need to gradually increase and decrease the width of a img element inside a fixed width and height div, let's say +10%/-10%, on click of a button. How can I do that? What I need to achieve is some sort of zooming of the img element contained inside the div (which has overflow:auto).
我需要在固定宽度和高度的 div 内逐渐增加和减少 img 元素的宽度，比如说+10%/-10%，点击一个按钮。我怎样才能做到这一点？我需要实现的是对 div 中包含的 img 元素进行某种缩放（其中包含overflow:auto）。
I'm using jquery and jquery ui because I would need it to be pannable. The result should be something like facebook covers, where you have an image which adapts to it's container (and that's already implemented) but where the user can zoom in/out the contained img element and pan it around to choose how it looks best.
我正在使用 jquery 和 jquery ui，因为我需要它是可平移的。结果应该是类似于 facebook 封面的东西，在那里你有一个适应它的容器的图像（并且已经实现了）但是用户可以放大/缩小包含的 img 元素并平移它以选择它的最佳外观。
I have no idea how to do it, please help!
我不知道该怎么做，请帮忙！
Thank you so much
太感谢了
回答by gvee
DEMO: http://jsfiddle.net/7gVgX/
演示：http: //jsfiddle.net/7gVgX/
JQuery
查询
$('div').click(function () {
$(this).css({
'width' : $(this).width() * 1.1
, 'height': $(this).height() * 1.1
});
});
回答by Jonathon
You can get an image's width by doing:
您可以通过执行以下操作来获取图像的宽度：
var w = $("#image_id").css("width");
var w = $("#image_id").css("width");
to increase it by 10%, you can multiply it by 1.1:
要将其增加 10%，您可以将其乘以 1.1：
w = w * 1.1;
w = w * 1.1;
and you can apply this change back to the image by doing:
您可以通过执行以下操作将此更改应用回图像：
$("#image_id").css("width", w + "px");
$("#image_id").css("width", w + "px");
回答by Tzook Bar Noy
simply get the current image width and increment or subtract it.
只需获取当前图像宽度并增加或减少它。
lets say css is:
让我们说 css 是：
img{
width: 80%;
}
and some js:
和一些js：
width = $(theImg).css("width");
//remove the percent
width.substring(0, width.length - 1);
//now add value
width = width+10;
//set the new value to css
$(theImg).css("width", width+"%");
回答by Dziad Borowy
or, with animation:
或者，使用动画：
var el = $('#elementId'),
w = el.width();
el.animate({ width: w * 1.1 }, 'fast');
