Mousewheel.js 鼠标滑轮跨浏览器 jQuery 兼容插件 - 资源分享

Mousewheel.js 鼠标滑轮跨浏览器 jQuery 兼容插件

发布于 2019-01-01 字数 2141 浏览 1902 评论 0

jQuery Mousewheel 是一个添加跨浏览器的鼠标滚轮支持的插件,使用这个插件,简单的绑定鼠标滑轮事件,无需考虑浏览器的兼容问题,他还提供了其他两个参数用于更好的处理用户的滑轮事件,通过参数我们可以判断滚动的方向和距离。

Mousewheel.js 鼠标滑轮跨浏览器 jQuery 兼容插件

安装方法

Using with Browserify

Support for browserify is baked in.

npm install jquery-mousewheel
npm install jquery-browserify

In your server-side node.js code:

var express = require('express');
var app = express.createServer();

app.use(require('browserify')({
    require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));

In your browser-side javascript:

var $ = require('jquery-browserify');
require('jquery-mousewheel')($);

下载源文件

你也可以到官方网站下载压缩包,然后解压到你的项目中即可。

使用方法

1、首先我们引入需要的插件文件。

<script src="jquery.min.js"></script>
<script src="jquery-mousewheel.js"></script>

为了监听滚轮事件,该插件引入了 mousewheel 事件,所以我们可以监听元素的 mousewheel 事件

2、mousewheel 事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta。 通过参数delta可以获取鼠标滚轮的方向和速度,如果delta的值是负的即 -1,那么滚轮就是向下滚动,正的 1 就是向上。 所以,我们可以编写如下的代码:

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

注意:回调函数中添加三个参数(delta, deltaX, and deltaY)的方式已经过时,将在后面的版本中删除。

Github地址:https://github.com/brandonaaron/jquery-mousewheel

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论