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)條的功能
您可能感興趣的文章:
- js中鼠標(biāo)滾輪事件詳解(firefox多瀏覽器)
- JS滾輪事件onmousewheel使用介紹
- javascript監(jiān)聽(tīng)鼠標(biāo)滾輪事件淺析
- js捕獲鼠標(biāo)滾輪事件代碼
- javascript 兼容鼠標(biāo)滾輪事件
- javascript實(shí)現(xiàn)禁止鼠標(biāo)滾輪事件
- JavaScript 滾輪事件使用說(shuō)明
- JavaScript焦點(diǎn)事件、鼠標(biāo)事件和滾輪事件使用詳解
- 兩種js監(jiān)聽(tīng)滾輪事件的實(shí)現(xiàn)方法
- javascript滾輪事件基礎(chǔ)實(shí)例講解（37）
相關(guān)文章
JavaScript具有一個(gè)非常有用的方法replace()，可以用它利用備選字符集途歡指定的字符，下面有個(gè)不錯(cuò)的示例，大家可以嘗試操作下2013-10-10
javascript驗(yàn)證手機(jī)號(hào)和實(shí)現(xiàn)星號(hào)(*)代替實(shí)例
在我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常要驗(yàn)證客戶輸入的手機(jī)號(hào)是否正確，有的時(shí)候還需要將中間的四位或者前幾位用星號(hào)(*)代替，那該如何實(shí)現(xiàn)呢？下面跟著小編一起來(lái)看看。2016-08-08
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣，只是傳入的參數(shù)列表形式不同，本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
uniapp在微信小程序中圖片寬度顯示問(wèn)題示例代碼
在uniapp中，如果你的富文本圖片顯示寬度不正常，你可以通過(guò)設(shè)置圖片的寬高屬性來(lái)解決這個(gè)問(wèn)題，這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問(wèn)題,需要的朋友可以參考下2023-02-02
Javascript代碼混淆綜合解決方案-Javascript在線混淆器
Javascript代碼混淆綜合解決方案-Javascript在線混淆器...2006-12-12
uni-app調(diào)取接口的3種方式以及封裝uni.request()詳解
我們?cè)趯?shí)際工作中要將數(shù)據(jù)傳輸?shù)椒?wù)器端,從服務(wù)器端獲取信息,都是通過(guò)接口的形式,下面這篇文章主要給大家介紹了關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的相關(guān)資料,需要的朋友可以參考下2022-08-08
uniapp自定義驗(yàn)證碼輸入框并隱藏光標(biāo)
這篇文章主要介紹了uniapp自定義驗(yàn)證碼輸入框隱藏光標(biāo),效果是點(diǎn)擊輸入框喚起鍵盤，藍(lán)框就相當(dāng)于input的光標(biāo)，驗(yàn)證碼輸入錯(cuò)誤或者不符合格式要求會(huì)將字體以及邊框改成紅色提示持續(xù)1s然后清空數(shù)據(jù)，恢復(fù)原邊框樣式，需要的朋友可以參考下2023-02-02
在現(xiàn)代Web開(kāi)發(fā)中，JavaScript已經(jīng)成為無(wú)法替代的核心技術(shù)，在現(xiàn)代Web開(kāi)發(fā)中，JavaScript已經(jīng)成為無(wú)法替代的核心技術(shù)，本文將通過(guò)代碼示例詳細(xì)介紹一些實(shí)踐解決方案，感興趣的同學(xué)可以參考下2023-06-06
小程序如何在不同設(shè)備上自適應(yīng)生成海報(bào)的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序如何在不同設(shè)備上自適應(yīng)生成海報(bào)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼,涉及JavaScript定時(shí)函數(shù)及流程控制的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10