需求:点击图片进行放大,再点击缩小,进行轮回操作。
分析:可以用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')触发.防止点击第一次无效