jquery点击图片进行放大缩小

彭礼骞
2023-12-01

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

分析:可以用jquery的toggle事件

HTML中图片显示部分:

<img src="" id="beforeTreat3" οnclick="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')触发.防止点击第一次无效

 类似资料: