jQuery mousewheel API 是 jQuery 的一個鼠標滾輪事件的插件,使用它可以方便地為網頁添加鼠標滾輪事件的監聽器,從而實現一些有趣的效果。
要使用 jQuery mousewheel API,首先需要在 HTML 文件中引入 jQuery 庫和 mousewheel 插件:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
引入庫以后,就可以開始使用鼠標滾輪事件了。下面是一個例子,當用戶使用鼠標滾輪向上滾動時,頁面會向上滑動 200 像素,當用戶使用鼠標滾輪向下滾動時,頁面會向下滑動 200 像素:
$(window).on('mousewheel', function(event) {
if (event.originalEvent.wheelDelta / 120 >0) {
$('html, body').animate({
scrollTop: '-=200px'
}, 'fast');
} else {
$('html, body').animate({
scrollTop: '+=200px'
}, 'fast');
}
});
在這個例子中,我們綁定了 window 對象上的 mousewheel 事件,當用戶滾動鼠標滾輪時觸發這個事件。在事件處理函數中,我們使用 event.originalEvent.wheelDelta 屬性獲取用戶滾動鼠標滾輪的方向,如果方向是向上滾動,就向上滑動頁面 200 像素,否則就向下滑動頁面 200 像素。
另外,jQuery mousewheel API 還提供了一些其它的方法和事件,比如 mousewheel.start 和 mousewheel.stop 事件可以用于在用戶滾動鼠標滾輪時啟動和停止動畫,mousewheel.deltaFactor 屬性可以用于調整鼠標滾輪的滾動速度等。如果想深入了解這些方法和事件,可以查看官方文檔。
上一篇清除背景css樣式