鼠標(biāo)滾輪編程
更新時(shí)間：2007年01月09日 00:00:00 作者：
以前沒(méi)有注意到這個(gè)滾輪，看到這里有一篇說(shuō)這個(gè)的：http://www.javascriptsearch.com/guides/Advanced/articles/JSMouseScrolling.html
我把它轉(zhuǎn)過(guò)來(lái)了。如果是在實(shí)際應(yīng)用中，有的時(shí)候還是蠻有用的。主要是得到滾輪是向上滾還是向下滾。
注釋的代碼
function handle(delta) {
if (delta < 0)
…;
else
…;
}
/** 事件句柄
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE或者Opera. */
delta = event.wheelDelta/120;
/** 在Opera9中，事件處理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** 如果 增量不等于0則觸發(fā)
* 主要功能為測(cè)試滾輪向上滾或者是向下
*/
if (delta)
handle(delta);
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滾輪事件 **/
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
在上面的代碼中,handler函數(shù)里的代碼就是你要寫(xiě)的，它有一個(gè)參數(shù)-delta，事實(shí)上，它只是代碼鼠標(biāo)此刻是向上滾或者是向下滾。如下所示，
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
我把它轉(zhuǎn)過(guò)來(lái)了。如果是在實(shí)際應(yīng)用中，有的時(shí)候還是蠻有用的。主要是得到滾輪是向上滾還是向下滾。
注釋的代碼
function handle(delta) {
if (delta < 0)
…;
else
…;
}
/** 事件句柄
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE或者Opera. */
delta = event.wheelDelta/120;
/** 在Opera9中，事件處理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** 如果 增量不等于0則觸發(fā)
* 主要功能為測(cè)試滾輪向上滾或者是向下
*/
if (delta)
handle(delta);
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滾輪事件 **/
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
在上面的代碼中,handler函數(shù)里的代碼就是你要寫(xiě)的，它有一個(gè)參數(shù)-delta，事實(shí)上，它只是代碼鼠標(biāo)此刻是向上滾或者是向下滾。如下所示，
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
JS中產(chǎn)生標(biāo)識(shí)符方式的演變
本文記錄下JS中產(chǎn)生標(biāo)識(shí)符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標(biāo)識(shí)符的關(guān)鍵字，如 let、const、class。2015-06-06
微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本文主要介紹了JavaScript樹(shù)結(jié)構(gòu)的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
讓網(wǎng)頁(yè)根據(jù)不同IE版本顯示不同的內(nèi)容
在上一篇blog 《IE8里判斷當(dāng)前網(wǎng)頁(yè)顯示模式》里面提到IE有不同的顯示模式以及如何用Javascript 來(lái)動(dòng)態(tài)判定。 Web開(kāi)發(fā)者可以根據(jù)不同顯示模式導(dǎo)入不同的內(nèi)容。2009-02-02
理解Javascript_06_理解對(duì)象的創(chuàng)建過(guò)程
在《理解Javascript_05_原型繼承原理》一文中已經(jīng)詳細(xì)的講解了原型鏈的實(shí)現(xiàn)原理，大家都知道原型鏈?zhǔn)腔趯?duì)象創(chuàng)建的（沒(méi)有對(duì)象,哪來(lái)原型），那么今天就來(lái)解析一下對(duì)象的創(chuàng)建過(guò)程。2010-10-10
下面小編就為大家?guī)?lái)一篇關(guān)于使用js算總價(jià)的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06 
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07 
JS控制頁(yè)面跳轉(zhuǎn)時(shí)未請(qǐng)求要跳轉(zhuǎn)的地址怎么回事
在js中通過(guò)window.location.href控制頁(yè)面跳轉(zhuǎn)時(shí)，有時(shí)會(huì)跳轉(zhuǎn)至緩存頁(yè)面，并沒(méi)有真正去請(qǐng)求要跳轉(zhuǎn)的地址，導(dǎo)致頁(yè)面數(shù)據(jù)未能及時(shí)加載刷新。怎么解決呢？下面小編給大家解答下
2016-10-10