javascript - 使用 jquery/javascript 点击时增加/减少 css 宽度

Question

我需要逐渐增加和减少固定宽度和高度 div 内的 img 元素的宽度，比如说+10%/-10%，单击按钮。我怎样才能做到这一点？我需要实现的是对 div 内包含的 img 元素进行某种缩放（具有overflow:auto）。

我正在使用 jquery 和 jquery ui，因为我需要它是可平移的。结果应该是类似于 facebook 封面的东西，其中您有一个适应其容器的图像（并且已经实现），但用户可以放大/缩小包含的 img 元素并平移它以选择它看起来最好的方式。

我不知道该怎么做，请帮忙！

太感谢了

Answer 1

演示：http: //jsfiddle.net/7gVgX/

jQuery

$('div').click(function () {
    $(this).css({
        'width' : $(this).width()  * 1.1
      , 'height': $(this).height() * 1.1
    });
});

Answer 2

只需获取当前图像宽度并增加或减少它。

可以说css是：

img{
    width: 80%;
}

和一些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+"%");

Answer 3

或者，使用动画：

var el = $('#elementId'),
    w = el.width();
el.animate({ width: w * 1.1 }, 'fast');

Answer 4

您可以通过以下方式获取图像的宽度：

var w = $("#image_id").css("width");

要将其增加 10%，您可以将其乘以 1.1：

w = w * 1.1;

您可以通过执行以下操作将此更改应用回图像：

$("#image_id").css("width", w + "px");