鼠標(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ù)里的代碼就是你要寫的，它有一個(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ù)里的代碼就是你要寫的，它有一個(gè)參數(shù)-delta，事實(shí)上，它只是代碼鼠標(biāo)此刻是向上滾或者是向下滾。如下所示，
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
獲取select元素被選中的文本內(nèi)容的方法有很多，本文為大家介紹下使用javascript來(lái)輕松實(shí)現(xiàn)下2014-01-01
本文為大家提供一段加入收藏的js代碼以及實(shí)用Jquery更改對(duì)象透明度的代碼，需要的朋友可以參考下2014-01-01
簡(jiǎn)單談?wù)刯avascript Date類型
Date對(duì)象，是操作日期和時(shí)間的對(duì)象。Date對(duì)象對(duì)日期和時(shí)間的操作只能通過(guò)方法。本文就給大家簡(jiǎn)單講述一下DATE類型的使用。2015-09-09
js前臺(tái)分頁(yè)顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺(tái)分頁(yè)顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_(kāi)發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你2013-03-03
跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說(shuō)明
昨天去 大牛 司徒正美 的blog 看博文 突然看到 關(guān)于 onmouseenter 和onmouseleave 兩個(gè)ie專有事件..2010-05-05
JavaScript表單驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
使用JS實(shí)現(xiàn)一個(gè)功能豐富的待辦事項(xiàng)應(yīng)用
在日常工作和生活中,我們經(jīng)常需要處理各種各樣的待辦事項(xiàng),這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)功能豐富的待辦事項(xiàng)應(yīng)用,需要的可以了解下2024-01-01
這篇文章主要介紹了ES6概念 Symbol toString()方法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JavaScript中一些特殊的字符運(yùn)算的相關(guān)資料,需要的朋友可以參考下2017-08-08
如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個(gè)需求,需要顯示溫濕度,網(wǎng)上找了一圈沒(méi)找到解決方法,所以只能自己寫一個(gè),這篇文章主要給大家介紹了關(guān)于如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度的相關(guān)資料,需要的朋友可以參考下2022-03-03