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

how to resize an image on "onClick" using jquery?

本文关键字：调整 图像 onClick 何使用 jquery      更新时间：2023-09-26

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

这是我的小

提琴。这很简单。不增加很多次的诀窍是这个条件：

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

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

非常简单的

JSFiddle：Fiddle。

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

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