jquery点击图片进行放大缩小

来源:互联网 发布:中国淘宝店主平均收入 编辑:程序博客网 时间:2024/05/17 00:13

需求:点击图片进行放大,再点击缩小,进行轮回操作。

分析:可以用jquery的toggle事件

HTML中图片显示部分:

<img src="" id="beforeTreat3" onclick="changeSize(this.id)"></img>

对应事件的javascript函数如下:

function changeSize(id){   var img = $("#"+id);   var oWidth=img.width(); //取得图片的实际宽度   var oHeight=img.height(); //取得图片的实际高度    $("#"+id).live("click",function(){  $(this).toggle(function(){   img.width(oWidth + 300); img.height(oHeight + 300/oWidth*oHeight);  }, function(){  img.width(oWidth); img.height(oHeight); }).trigger('click');    });}

说明:通过click事件绑定.再用 trigger('click')触发.防止点击第一次无效

0 0
原创粉丝点击