jQuery 本身並沒提供滑鼠滾動(Mouse Wheel)事件，當要特別針對滑鼠滾動來處理時就得自己再額外寫程式去判斷瀏覽器的差異性。不過現在也有 Mouse Wheel Extension 套件了，讓我們可快速的加上滑鼠滾動(Mouse Wheel)事件囉！
套件名稱：Mouse Wheel Extension
套件版本：3.0.6
作者網站：http://brandonaaron.net/code/mousewheel/demos
套件網址：http://plugins.jquery.com/project/mousewheel
發佈日期：2011-11-10
檔案大小：2.34 KB
檔案下載：jquery.mousewheel.js
參數說明：
檢視原始碼 JavaScript
1 2 3 | fn(選填) 描述： 觸發事件後要執行的動作 預設值： 無 |
方法說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 | // 設定指定元素的 mousewheel 事件 $(selector).mousewheel(fn); // 設定指定元素的 mousewheel 事件 $(selector).bind('mousewheel', data, fn); // 移除指定元素的 mousewheel 事件 $(selector).unbind('mousewheel', data); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <style type="text/css"> #mousewheel_example { padding: 15px; width: 150px; height: 150px; border: 1px solid #000; background: green; } </style> <script type="text/javascript"> $(function(){ var count = 0; $("#mousewheel_example").mousewheel(function(event, delta){ // delta 若是負值是滾輪往下滾；反之則是滾輪往上滾 $(this).html(count += delta).css({ backgroundColor: count >=0 ? "green" : "red" }); return false; }).html(count); }); </script> <body> <div id='mousewheel_example'></div> </body> |