html中点击图片自动放大缩小,jquery点击图片进行放大缩小

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

分析：可以用jquery的toggle事件

HTML中图片显示部分：

对应事件的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')触发．防止点击第一次无效