Question

如何使用jquery调整图像大小？

<td align="center"><img width="150px" src="{{=URL(r=request, f='download', args=Product.image)}}" AlT="no picture provided"/></td>

使用forloop直接从数据库加载图像，并显示在屏幕上。

我想要实现的是当你点击它时增加图像的大小。这样的事情http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_relative 但它不应该继续增加图像。

Answer 1

这是我的fiddle。很简单。不会多次增加的诀窍是这种情况：

if (img.width() < 200)

小提琴的代码：

<!-- Html -->

<img id="mrbean" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" />

<input type="button" value="Increase image size" />

// JavaScript
$("input").click(function() {
    var img = $("#mrbean");

    if (img.width() < 200)
    {
        img.animate({width: "200px", height: "200px"}, 1000);
    }
    else 
    {
        img.animate({width: img.attr("width"), height: img.attr("height")}, 1000);
    }
});

更新fiddle以在第二次点击时将图片重新调整为原始大小。

Answer 2

非常简单的JSFiddle：Fiddle。

只需使用jQuery在图像上设置click事件，然后直接修改高度和宽度。

$('.myImg').click(function() {
    $(this).height(400);
    $(this).width(400);
    $(this).off(); //removes the handler so that it only resizes once...
})

如何使用jquery在“onClick”上调整图像大小？

2 个答案: