JS滾輪事件onmousewheel使用介紹_javascript技巧

典型的應(yīng)用時鼠標滾輪滾動控制圖片或者文字的大小，例如此類的轉(zhuǎn)動鼠標滾輪實現(xiàn)縮放等等交互效果中，會用到 Mousewheel 事件。在大多數(shù)瀏覽器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滾輪事件的兼容性差異有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是 Firefox 3.5+ 卻不支持此事件，不過慶幸 Firefox 3.5+ 中提供了另外一個等同的事件：”DOMMouseScroll” ，兼容代碼如下：
代碼如下:
// isFirefox 是偽代碼，大家可以自行實現(xiàn)
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

“mousewheel” 事件中的 “event.wheelDelta” 屬性值：返回的值，如果是正值說明滾輪是向上滾動，如果是負值說明滾輪是向下滾動；返回的值，均為120 的倍數(shù)，即：幅度大小 = 返回的值 / 120。
“DOMMouseScroll” 事件中的 “event.detail” 屬性值：返回的值，如果是負值說明滾輪是向上滾動（與 “event.wheelDelta” 正好相反），如果是正值說明滾輪是向下滾動；返回的值，均為 3 的倍數(shù)，即：幅度大小 = 返回的值 / 3。
“mousewheel” 事件在 Opera 10+ 中卻是個特例，既有 “event.wheelDelta” 屬性，也有 “event.detail” 屬性。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com