使用 jQuery/JavaScript 单击时增加/减少 CSS 宽度

increase/decrease css width on click with jquery/javascript

本文关键字：减少 CSS 增加 宽度 单击 jQuery JavaScript 使用      更新时间：2023-09-26

我需要在单击按钮时逐渐增加和减少固定宽度和高度div内的img元素的宽度，比如说+10%/-10%。我该怎么做？我需要实现的是div 中包含的 img 元素的某种缩放（它有 overflow:auto ）。

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

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

非常感谢

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

杰奎里

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

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

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

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

w = w * 1.1;

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

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

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

假设 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+"%");

或者，使用动画：

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