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