Date: 2010-03-10 00:00:00

非flash实现点击图片放大缩小

非flash实现点击图片放大缩小

左键点击放大图片,右键缩小图片,这种效果可以使用flash实现,不过flash处理图片的能力不高,如果我们对图片的分辨率要求高,而且要控制大小的话,使用flash就不能得到很好的效果,现在介绍使用JS实现方法,只需添加以下代码,就可以让你的图片放大缩小了。

<div align=center>
<img
   onload="var image=new Image();
   image.src=this.src;
   if(image.width>0 && image.height>0){if(image.width>=700){
           this.width=700;
           this.height=image.height*700/image.width;}
         }" 

   onmouseup=(this.width+=(3-event.button*2)*10,this.height+=(3-event.button*2)*10) oncontextmenu=return(false) style="BORDER-RIGHT: #008000 23px groove; BORDER-TOP: #008000 23px groove; BORDER-LEFT: #008000 23px groove; BORDER-BOTTOM: #008000 23px groove" src="9E.jpg">

案例效果:

 
9E.jpg是你的图片名称,this就是指 img这个元素本身, this.src就是img的src,onload加载时执行的函数,onmouseup是响应鼠标的函数。