鼠标滚轮控制图片大小

onmousewheel是鼠标滚轮事件,是IE6的对象的新事件;style.zoom,event.wheelDelta是IE6的对象的新属性,style.zoom是变大缩小,未赋值前返回null,赋值成XX%,就变化为XX%,并返回XX%;event.wheelDelta是滚轮滚动一下的角度,上滚一下为120,下滚一下为-120。

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <HTML> 
  3. <HEAD> 
  4. <TITLE> New Document </TITLE> 
  5. <script language="JavaScript"> 
  6. <!--  
  7. //改变图片大小  
  8. function resizepic(thispic)  
  9. {  
  10. if(thispic.width>700) thispic.width=700;  
  11. }  
  12. //无级缩放图片大小  
  13. function bbimg(o)  
  14. {  
  15. var zoom=parseInt(o.style.zoom, 10)||100;  
  16. zoom+=event.wheelDelta/12;  
  17. if (zoom>0) o.style.zoom=zoom+'%';  
  18. return false;  
  19. }  
  20. --> 
  21. </script> 
  22. </HEAD> 
  23.  
  24. <BODY> 
  25. <IMG onmousewheel="return bbimg(this)" height=439 src="http://tech.lmtw.com/UploadFiles/200702/20070227133622544.jpg" width=520 onload=javascript:resizepic(this) border=0> 
  26. <br><br> 
  27. <img src='http://www.blueidea.com/img/common/logo.gif' onMouseWheel="this.style.zoom*= Math.pow(.9,Math.abs(event.wheelDelta)/event.wheelDelta);" onClick="this.style.zoom=1;" style="zoom=1;" /> 
  28.  
  29.  
  30. </BODY> 
  31. </HTML> 

 

你可能感兴趣的:(职场,休闲,鼠标滚轮控制图片大小)