DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js鼠標滑輪滾動事件綁定的簡單實例
js鼠標滑輪滾動事件綁定的簡單實例
編輯:JavaScript綜合知識     

 本篇文章主要介紹了js鼠標滑輪滾動事件綁定的簡單實例(兼容主流浏覽器)。需要的朋友可以過來參考下,希望對大家有所幫助

 代碼如下: /** Event handler for mouse wheel event.           *鼠標滾動事件           */           var wheel = function(event) {               var delta = 0;               if (!event) /* For IE. */                   event = window.event;               if (event.wheelDelta) { /* IE/Opera. */                   delta = event.wheelDelta / 120;               } else if (event.detail) {                   /** Mozilla case. */                   /** In Mozilla, sign of delta is different than in IE.                   * Also, delta is multiple of 3.                   */                   delta = -event.detail / 3;               }               /** If delta is nonzero, handle it.               * Basically, delta is now positive if wheel was scrolled up,               * and negative, if wheel was scrolled down.               */               if (delta)                   handle(delta);               /** Prevent default actions caused by mouse wheel.               * That might be ugly, but we handle scrolls somehow               * anyway, so don't bother here..               */               if (event.preventDefault)                   event.preventDefault();               event.returnValue = false;           }             /** Initialization code.            * If you use your own event management code, change it as required.           */           if (window.addEventListener) {               /** DOMMouseScroll is for mozilla. */               window.addEventListener('DOMMouseScroll', wheel, false);           }           /** IE/Opera. */           window.onmousewheel = document.onmousewheel = wheel;             /** This is high-level function.           * It must react to delta being more/less than zero.           */           var handle = function(delta) {               var random_num = Math.floor((Math.random() * 100) + 50);               if (delta < 0) {                   // alert("鼠標滑輪向下滾動:" + delta + "次!"); // 1                   $("btn_next_pic").onclick(random_num);                   return;               } else {                   // alert("鼠標滑輪向上滾動:" + delta + "次!"); // -1                   $("btn_last_pic").onclick(random_num);                   return;               }           }    
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved