0

如何使用 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 但它不应该继续增加图像。

4

2 回答 2

1

这是我的小提琴。很简单。不增加多次的诀窍是这种情况：

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);
    }
});

更新小提琴以在第二次单击时将图像调整回其原始大小。

于 2013-10-09T17:25:31.070 回答
0

非常简单的 JSFiddle：Fiddle。

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

$('.myImg').click(function() {
    $(this).height(400);
    $(this).width(400);
    $(this).off(); //removes the handler so that it only resizes once...
})
于 2013-10-09T17:19:44.480 回答