javascript 鼠標(biāo)滾輪事件
更新時(shí)間：2009年04月09日 18:05:22 作者：
由于鼠標(biāo)滾輪事件在 IE 和 FF 的實(shí)現(xiàn)有點(diǎn)不一樣，所以有需要把這個(gè)寫成一個(gè)統(tǒng)一可用的事件。
今天在網(wǎng)上找來(lái)了響應(yīng)滾輪的函數(shù)并改寫成下面的類
function wheelEvent(obj, handle)
{
this.handle = handle;
// different events between Firefox and IE
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = function (event)
{
var ev = event || window.event;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3); // Firefox using `wheelDelta` IE using `detail`
eval ('delta ? ' + parent.handle + '(delta) : null;');
}
在使用的時(shí)候需要定義一個(gè)執(zhí)行函數(shù)，用以根據(jù)從上述類中獲得的值進(jìn)行操作，并為指定的網(wǎng)頁(yè)元素添加事件。比如
function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById('text'), 'handle');
在上例中第一個(gè)參數(shù)是添加滾輪事件的網(wǎng)頁(yè)元素， id 為 text 的 div；第二個(gè)參數(shù)是執(zhí)行函數(shù)的名字 handle。
其中 handle 函數(shù)必須有且只有一個(gè)參數(shù)delta，滾輪往上滾時(shí) delta 大于 0，往下則小于 0。上例 handle 函數(shù)的作用是用滾輪對(duì) div 實(shí)現(xiàn)滾動(dòng)條的功能
復(fù)制代碼 代碼如下:
function wheelEvent(obj, handle)
{
this.handle = handle;
// different events between Firefox and IE
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = function (event)
{
var ev = event || window.event;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3); // Firefox using `wheelDelta` IE using `detail`
eval ('delta ? ' + parent.handle + '(delta) : null;');
}
在使用的時(shí)候需要定義一個(gè)執(zhí)行函數(shù)，用以根據(jù)從上述類中獲得的值進(jìn)行操作，并為指定的網(wǎng)頁(yè)元素添加事件。比如
復(fù)制代碼 代碼如下:
function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById('text'), 'handle');
其中 handle 函數(shù)必須有且只有一個(gè)參數(shù)delta，滾輪往上滾時(shí) delta 大于 0，往下則小于 0。上例 handle 函數(shù)的作用是用滾輪對(duì) div 實(shí)現(xiàn)滾動(dòng)條的功能
您可能感興趣的文章:
相關(guān)文章
Javascript 一些需要注意的細(xì)節(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇Javascript 一些需要注意的細(xì)節(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
微信小程序?qū)崿F(xiàn)簡(jiǎn)單秒表設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單秒表設(shè)計(jì)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
關(guān)于angular 8.1使用過(guò)程中的一些記錄
這篇文章主要給大家介紹了關(guān)于angular 8.1使用過(guò)程中的一些記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
初學(xué)js插入節(jié)點(diǎn)appendChild insertBefore使用方法
由于可見insertBefore()方法的特性是在已有的子節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)但是兩種情況結(jié)合起來(lái)發(fā)現(xiàn)insertBefore()方法插入節(jié)點(diǎn)，是可以在子節(jié)點(diǎn)列表的任意位置。2011-07-07
本文主要介紹了three.js的基礎(chǔ)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
javascript字符串循環(huán)匹配實(shí)例分析
這篇文章主要介紹了javascript字符串循環(huán)匹配,實(shí)例分析三種常用的字符串循環(huán)匹配的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
靈活使用console讓js調(diào)試更簡(jiǎn)單的方法步驟
這篇文章主要介紹了靈活使用console讓js調(diào)試更簡(jiǎn)單的方法步驟，適當(dāng)使用這些方法可以使調(diào)試更容易，更快速，更直觀，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04![在JavaScript中獲取請(qǐng)求的URL參數(shù)[正則]](http://img.jbzj.com/images/xgimg/bcimg7.png)
在JavaScript中獲取請(qǐng)求的URL參數(shù)[正則]
在ASP.NET后臺(tái)代碼中，對(duì)于這樣的URL請(qǐng)求地址：http://www.abc.com?id=001,我們可以通過(guò)Request.QueryString["id"]的方法很容易的獲取到URL中請(qǐng)求的參數(shù)的值，但是要在前臺(tái)js代碼中獲取請(qǐng)求的參數(shù)的值，應(yīng)該怎么做呢？2010-12-12
這篇文章主要介紹了Javascript之圖片的延遲加載的實(shí)例詳解的相關(guān)資料,這里對(duì)延遲加載和異步加載進(jìn)行了詳解和使用方法，需要的朋友可以參考下2017-07-07
javascript動(dòng)畫對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼
javascript動(dòng)畫對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-09-09