javascript滾輪事件的示例分析

小編給大家分享一下javascript滾輪事件的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站-企業(yè)級(jí)云服務(wù)器提供商,為用戶提供云服務(wù)器、CDN、云安全服務(wù)、成都服務(wù)器托管、服務(wù)器租用、高防主機(jī)等全方位云服務(wù)與各行業(yè)解決方案,幫助企業(yè)及個(gè)人極速備案，輕松上云，安全無(wú)憂。

具體內(nèi)容如下

<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box1{ 
        width: 100px; 
        height: 100px; 
        background-color: red; 
      } 
       
    </style> 
     
    <script type="text/javascript"> 
       
      window.onload = function(){ 
         
        //使div可以跟隨鼠標(biāo)滾輪滾動(dòng)來(lái)改變高度 
        //滾輪向下滾，div變高 滾輪向上滾 div變短 
         
        //獲取box1 
        var box1 = document.getElementById("box1"); 
         
        /* 
         * onmousewheel 
         * - 鼠標(biāo)滾輪滾動(dòng)的事件，但是該事件火狐瀏覽器并不支持 
         * - 在火狐中需要使用DOMMouseScroll，這個(gè)事件只能通過(guò)addEventListener()來(lái)綁定 
         */ 
        //為box1綁定一個(gè)鼠標(biāo)滾輪滾動(dòng)的事件 
        box1.onmousewheel = function(event){ 
          event = event || window.event; 
           
          //判斷滾輪滾動(dòng)的方向 
          /* 
           * wheelDelta 
           * - 事件對(duì)象中的屬性，可以用來(lái)判斷鼠標(biāo)滾輪滾動(dòng)的方向 
           * - 向下滾 -120 向上滾 +120 
           * - 該屬性的值并不重要，重要的是值的符號(hào)，需要通過(guò)符號(hào)來(lái)判斷滾動(dòng)的方向 
           * - 但是該屬性火狐瀏覽器并不支持 
           */ 
          //alert(event.wheelDelta); 
           
          /* 
           * 火狐中通過(guò)detail來(lái)判斷方向 
           * - 向上滾 -3  向下滾 +3 
           */ 
          //alert(event.detail); 
           
          if(event.wheelDelta < 0 || event.detail > 0){ 
            //向下滾 
            //增加box1的高度 
            box1.style.height = box1.offsetHeight + 10 + "px"; 
             
          }else{ 
            //向上滾 
            //減小box1的高度 
            box1.style.height = box1.offsetHeight - 10 + "px"; 
          } 
           
           
          /* 
           * 使用addEventListener()綁定的事件，不能通過(guò)return false來(lái)取消默認(rèn)行為 
           * 需要調(diào)用事件對(duì)象 preventDefault()方法來(lái)取消默認(rèn)行為 
           * 但是在IE8中沒(méi)有該方法 
           */ 
          event.preventDefault &&　event.preventDefault(); 
           
          //當(dāng)頁(yè)面中有滾動(dòng)條時(shí)，由于滾輪滾動(dòng)的默認(rèn)行為會(huì)導(dǎo)致頁(yè)面整體下移 
          //取消默認(rèn)行為 
          return false; 
           
        }; 
         
        bind(box1 , "DOMMouseScroll" , box1.onmousewheel); 
         
         
      }; 
       
      function bind(obj , eventStr , callback){ 
         
        if(obj.addEventListener){ 
          //如果是正常瀏覽器 
          obj.addEventListener(eventStr , callback , false); 
        }else{ 
          //IE8 
          obj.attachEvent("on"+eventStr , function(){ 
            callback.call(obj); 
          }); 
        } 
      } 
       
    </script> 
  </head> 
  <body > 
     
    <div id="box1"></div> 
     
     
  </body> 
</html>

看完了這篇文章，相信你對(duì)“javascript滾輪事件的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文題目：javascript滾輪事件的示例分析
轉(zhuǎn)載注明：http://bm7419.com/article14/jjdgge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、服務(wù)器托管、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容