javascript 鼠標(biāo)滾輪事件
更新時間：2009年04月09日 18:05:22 作者：
由于鼠標(biāo)滾輪事件在 IE 和 FF 的實現(xiàn)有點不一樣，所以有需要把這個寫成一個統(tǒng)一可用的事件。
今天在網(wǎng)上找來了響應(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;');
}
在使用的時候需要定義一個執(zhí)行函數(shù)，用以根據(jù)從上述類中獲得的值進(jìn)行操作，并為指定的網(wǎng)頁元素添加事件。比如
function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById('text'), 'handle');
在上例中第一個參數(shù)是添加滾輪事件的網(wǎng)頁元素， id 為 text 的 div；第二個參數(shù)是執(zhí)行函數(shù)的名字 handle。
其中 handle 函數(shù)必須有且只有一個參數(shù)delta，滾輪往上滾時 delta 大于 0，往下則小于 0。上例 handle 函數(shù)的作用是用滾輪對 div 實現(xiàn)滾動條的功能
復(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;');
}
在使用的時候需要定義一個執(zhí)行函數(shù)，用以根據(jù)從上述類中獲得的值進(jìn)行操作，并為指定的網(wǎng)頁元素添加事件。比如
復(fù)制代碼 代碼如下:
function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById('text'), 'handle');
其中 handle 函數(shù)必須有且只有一個參數(shù)delta，滾輪往上滾時 delta 大于 0，往下則小于 0。上例 handle 函數(shù)的作用是用滾輪對 div 實現(xiàn)滾動條的功能
相關(guān)文章
JavaScript具有一個非常有用的方法replace()，可以用它利用備選字符集途歡指定的字符，下面有個不錯的示例，大家可以嘗試操作下2013-10-10
javascript驗證手機(jī)號和實現(xiàn)星號(*)代替實例
在我們?nèi)粘ｉ_發(fā)中經(jīng)常要驗證客戶輸入的手機(jī)號是否正確，有的時候還需要將中間的四位或者前幾位用星號(*)代替，那該如何實現(xiàn)呢？下面跟著小編一起來看看。2016-08-08
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣，只是傳入的參數(shù)列表形式不同，本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
在uniapp中，如果你的富文本圖片顯示寬度不正常，你可以通過設(shè)置圖片的寬高屬性來解決這個問題，這篇文章主要介紹了uniapp在微信小程序中圖片寬度顯示問題,需要的朋友可以參考下2023-02-02
Javascript代碼混淆綜合解決方案-Javascript在線混淆器
Javascript代碼混淆綜合解決方案-Javascript在線混淆器...2006-12-12
uni-app調(diào)取接口的3種方式以及封裝uni.request()詳解
我們在實際工作中要將數(shù)據(jù)傳輸?shù)椒?wù)器端,從服務(wù)器端獲取信息,都是通過接口的形式,下面這篇文章主要給大家介紹了關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了uniapp自定義驗證碼輸入框隱藏光標(biāo),效果是點擊輸入框喚起鍵盤，藍(lán)框就相當(dāng)于input的光標(biāo)，驗證碼輸入錯誤或者不符合格式要求會將字體以及邊框改成紅色提示持續(xù)1s然后清空數(shù)據(jù)，恢復(fù)原邊框樣式，需要的朋友可以參考下2023-02-02
在現(xiàn)代Web開發(fā)中，JavaScript已經(jīng)成為無法替代的核心技術(shù)，在現(xiàn)代Web開發(fā)中，JavaScript已經(jīng)成為無法替代的核心技術(shù)，本文將通過代碼示例詳細(xì)介紹一些實踐解決方案，感興趣的同學(xué)可以參考下2023-06-06
小程序如何在不同設(shè)備上自適應(yīng)生成海報的實現(xiàn)方法
這篇文章主要介紹了小程序如何在不同設(shè)備上自適應(yīng)生成海報的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了JS實現(xiàn)狀態(tài)欄跑馬燈文字效果代碼,涉及JavaScript定時函數(shù)及流程控制的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10