Question

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

我正在使用jquery和jquery ui因为我需要它才能成为可能。结果应该是像Facebook封面，你有一个适应它的容器的图像（已经实现），但用户可以放大/缩小包含的img元素并平移它以选择它看起来最好。< / p>

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

非常感谢

Answer 1

JQuery的

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

Answer 2

您可以通过执行以下操作来获取图片的宽度：

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

将它增加10％，你可以乘以1.1：

w = w * 1.1;

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

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

Answer 3

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

让我们说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 4

或者，动画：

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

使用jquery / javascript单击增加/减少css宽度

4 个答案:

JQuery的