鼠标滚轮控制图片大小

时间 2021-08-12

标签 javascript java ide this idea spa xml 对象事件图片栏目 JavaScript 繁體版

原文原文链接

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

  
  
           
  
  
   
   
            
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
   
   
            
   
   <HTML> 
   
   
            
   
   <HEAD> 
   
   
            
   
   <TITLE> New Document </TITLE> 
   
   
            
   
   <script language="JavaScript"> 
   
   
            
   
   <!--  
   
   
            
   
   //改变图片大小  
   
   
            
   
   function resizepic(thispic)  
   
   
            
   
   {  
   
   
            
   
   if(thispic.width>700) thispic.width=700;  
   
   
            
   
   }  
   
   
            
   
   //无级缩放图片大小  
   
   
            
   
   function bbimg(o)  
   
   
            
   
   {  
   
   
            
   
   var zoom=parseInt(o.style.zoom, 10)||100;  
   
   
            
   
   zoom+=event.wheelDelta/12;  
   
   
            
   
   if (zoom>0) o.style.zoom=zoom+'%';  
   
   
            
   
   return false;  
   
   
            
   
   }  
   
   
            
   
   --> 
   
   
            
   
   </script> 
   
   
            
   
   </HEAD> 
   
   
            
   
    
   
   
            
   
   <BODY> 
   
   
            
   
   <IMG onmousewheel="return bbimg(this)" height=439 src="http://tech.lmtw.com/UploadFiles/200702/20070227133622544.jpg" width=520 onload=javascript:resizepic(this) border=0> 
   
   
            
   
   <br><br> 
   
   
            
   
   <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;" /> 
   
   
            
   
    
   
   
            
   
    
   
   
            
   
   </BODY> 
   
   
            
   
   </HTML>