HTML5 支援滑鼠滾輪事件(Chrome)

監聽 DOM 物件的 mousewheel 事件,可以讓此物件支援滑鼠的滾輪事件,例如以下的程式碼:

slide.addEventListener('mousewheel', domousewheel , false);

其中的 slide 註冊了 mousewheel 事件,因此每一次使用者於其中捲動滑鼠滾輪時,便會執行 domousewheel 這個函式,你必須建立此函式以回應相關的事件,例如以下的程式片段:

function changeNumber(e) {
// e.wheelDelta
}

引用 e.wheelDelta 這個屬性會取得兩個可能的值,如果是 120 表示使用者往前捲動滾輪,如果是 -120 表示往後捲動。以下是一個簡單的網頁範例:

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script>
        var value = 100;
        var slide;
        window.onload = function () {
            slide = document.getElementById('msg');
            slide.innerHTML = value;
            slide.addEventListener('mousewheel', changeNumber, false);
        }
        function changeNumber(e) {
            if (e.wheelDelta == 120 ) {
                value += 10;
            } else {
                value -= 10;
            }
            slide.innerHTML =  value  ;
            return false;
        }   
    </script>
</head>
<body>
    <div id="msg" style="height:120px;width:560px; "  >
    </div>
</body>
</html>

其中配置了一個測試 mousewheel 事件的 div 標籤,並且於網頁載入完成之後監聽此標籤區塊範圍內的滑鼠滾輪捲動事件,當這個事件被觸發,執行其中的 changeNumber 函式,這個函式會根據使用者的操作,改變公用變數 value 的值,並且重新顯示在 div標籤區域中。以下是一開始載入的畫面:


以下是將游標移動至區塊內,往後捲動滑鼠滾輪數字出現變化的效果,每觸發一 mousewheel 事件,數值便減 10 。


以下是往前捲動滑鼠滾輪數字增加的效果。


要特別注意的是,這裏所討論的事件名稱只適用 Chrome ,如果是 Firefox ,則需另外一個事件 DOMMouseScroll ,下次討論。 :)

4 則留言:

匿名 提到...

老師,
請問一下要怎麼讓這個效果再行動裝置上也可以順利操作?

謝謝~

康廷數位文教網 提到...

行動裝置並沒有滑鼠配備,互動的部份只能透過手勢相關事件進行處理

匿名 提到...

http://www.flatvsrealism.com/
請問如果我想要像這個網站最後慶祝,隨著滑鼠滾輪變換圖片達到動畫效果了話我要用甚麼指令比較好? 因為他在行動裝紙上也可以使用。

正在看你的書,5.2onmousewheel單元,但還是有些迷糊,請問要怎麼修改才可以達到我要的效果?

康廷數位文教網 提到...

你可以透過 touch 事件進行模擬即可, google 關鍵字 「JavaScript Touch events」, 即可找到許多相關的說明 …

Good Luck