JS滾輪事件onmousewheel使用介紹
更新時(shí)間：2013年11月01日 17:20:41 作者：
鼠標(biāo)滾輪滾動(dòng)控制圖片或者文字的大小，例如此類的轉(zhuǎn)動(dòng)鼠標(biāo)滾輪實(shí)現(xiàn)縮放等等交互效果中，會(huì)用到 Mousewheel 事件，感興趣的朋友可以了解下
典型的應(yīng)用時(shí)鼠標(biāo)滾輪滾動(dòng)控制圖片或者文字的大小，例如此類的轉(zhuǎn)動(dòng)鼠標(biāo)滾輪實(shí)現(xiàn)縮放等等交互效果中，會(huì)用到 Mousewheel 事件。在大多數(shù)瀏覽器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滾輪事件的兼容性差異有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是 Firefox 3.5+ 卻不支持此事件，不過慶幸 Firefox 3.5+ 中提供了另外一個(gè)等同的事件：”DOMMouseScroll” ，兼容代碼如下：
// isFirefox 是偽代碼，大家可以自行實(shí)現(xiàn)
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
“mousewheel” 事件中的 “event.wheelDelta” 屬性值：返回的值，如果是正值說明滾輪是向上滾動(dòng)，如果是負(fù)值說明滾輪是向下滾動(dòng)；返回的值，均為120 的倍數(shù)，即：幅度大小 = 返回的值 / 120。
“DOMMouseScroll” 事件中的 “event.detail” 屬性值：返回的值，如果是負(fù)值說明滾輪是向上滾動(dòng)（與 “event.wheelDelta” 正好相反），如果是正值說明滾輪是向下滾動(dòng)；返回的值，均為 3 的倍數(shù)，即：幅度大小 = 返回的值 / 3。
“mousewheel” 事件在 Opera 10+ 中卻是個(gè)特例，既有 “event.wheelDelta” 屬性，也有 “event.detail” 屬性。
復(fù)制代碼 代碼如下:
// isFirefox 是偽代碼，大家可以自行實(shí)現(xiàn)
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
“mousewheel” 事件中的 “event.wheelDelta” 屬性值：返回的值，如果是正值說明滾輪是向上滾動(dòng)，如果是負(fù)值說明滾輪是向下滾動(dòng)；返回的值，均為120 的倍數(shù)，即：幅度大小 = 返回的值 / 120。
“DOMMouseScroll” 事件中的 “event.detail” 屬性值：返回的值，如果是負(fù)值說明滾輪是向上滾動(dòng)（與 “event.wheelDelta” 正好相反），如果是正值說明滾輪是向下滾動(dòng)；返回的值，均為 3 的倍數(shù)，即：幅度大小 = 返回的值 / 3。
“mousewheel” 事件在 Opera 10+ 中卻是個(gè)特例，既有 “event.wheelDelta” 屬性，也有 “event.detail” 屬性。
您可能感興趣的文章:
相關(guān)文章
獲取JavaScript用戶自定義類的類名稱的代碼...2007-03-03
下面小編就為大家?guī)硪黄狫avaScript 函數(shù)的執(zhí)行過程。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生js編寫的autoComplete插件，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了讓html頁面不緩存js的實(shí)現(xiàn)方法,分析了HTML頁面緩存js的原理,并由此分析實(shí)現(xiàn)不緩存js的方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
JS代碼實(shí)現(xiàn)百度地圖 畫圓 刪除標(biāo)注
這篇文章主要介紹了JS代碼實(shí)現(xiàn)百度地圖 畫圓 刪除標(biāo)注的相關(guān)資料,實(shí)現(xiàn)此功能的設(shè)計(jì)思路非常明確，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧2016-10-10
這篇文章主要介紹了原生JS實(shí)現(xiàn)的輪播圖功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)輪播圖的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08
JavaScript實(shí)現(xiàn)頁面一鍵全選或反選
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁面一鍵全選或反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
前端 javascript 實(shí)現(xiàn)文件下載的示例
這篇文章主要介紹了前端 javascript 實(shí)現(xiàn)文件下載的示例2020-11-11
javascript下過濾數(shù)組重復(fù)值的代碼
javascript下過濾數(shù)組重復(fù)值的代碼...2007-09-09
全面兼容的javascript時(shí)間格式化函數(shù)(比較實(shí)用)
這篇文章主要介紹了全面兼容比較實(shí)用的javascript時(shí)間格式化函數(shù),需要的朋友可以參考下2014-05-05