滑动滚轮放大缩小

   doctype html  > 
   html  > 
   head  > 
   meta   charset  ="utf-8"  > 
   title  > 标题   title  > 
   meta   name  ="keywords"   content  =""  > 
   meta   name  ="description"   content  =""  > 
   style  >  
    *  {  margin  :  0  ;   padding  :  0  ;   list-style  :  none  ;  }  
    body  {  
        height  :   2000px  ; 
     }  
    #box  {  
        width  :   200px  ;  
        height  :   200px  ;  
        background  :   green  ; 
     } 
   style  > 
   head  > 
   body  > 
   div   id  ="box"  >  div  > 
   script  > 
     var   box  =  document.getElementById(  '  box  '  );
      var   str  =  window.navigator.userAgent.toLowerCase();
      if   (str.indexOf(  '  firefox  '  )  !=-  1  ) {  //  火狐浏览器 
         box.addEventListener(  '  DOMMouseScroll  '  ,  function   (event){
              //   event.preventDefault();//阻止窗口默认的滚动事件 
         //   console.log(event.detail);//前滚-3 
         if   (event.detail    0  ) {
            console.log(  '  前滚  '  );
            box.style.width  =  box.offsetWidth  +  20  +  '  px  '  ;
            box.style.height  =  box.offsetHeight  +  20  +  '  px  '  ;
        };
          if   (event.detail  >  0  ) {
            console.log(  '  后滚  '  );
            box.style.width  =  box.offsetWidth  -  20  +  '  px  '  ;
            box.style.height  =  box.offsetHeight  -  20  +  '  px  '  ;
        };
          return   false  ;  //  阻止默认事件 
         },  false  );
    }   else  {  //  非火狐浏览器 
         box.onmousewheel  =  function   (ev){
              var   e  =  ev  ||  window.event;
              /*  if (e.preventDefault) {
                e.preventDefault();
            } else{
                e.returnValue=false;
            };  */ 
             //   console.log(e); 
             //   console.log(e.wheelDelta);//前滚120 
             if   (e.wheelDelta  >  0  ) {
            console.log(  '  前滚  '  );
            box.style.width  =  box.offsetWidth  +  20  +  '  px  '  ;
            box.style.height  =  box.offsetHeight  +  20  +  '  px  '  ;
        };
          if   (e.wheelDelta    0  ) {
            console.log(  '  后滚  '  );
            box.style.width  =  box.offsetWidth  -  20  +  '  px  '  ;
            box.style.height  =  box.offsetHeight  -  20  +  '  px  '  ;
        };
          return   false  ;  //  阻止默认事件 
         }
    };
    
    script  > 
   body  > 
   html  >  

查看更多关于滑动滚轮放大缩小的详细内容...