jquery的鼠标滚轮插件 Mousewheel响应跨浏览器的鼠标滚轮事件

jquery插件默认是不支持鼠标中轮滚轮事件的，现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。

 

使用mousewheel事件有以下两种方式：

 

使用mousewheel和unmousewheel事件函数；

使用经典的bind和unbind函数。 

[javascript] view plaincopy

1. $('div.mousewheel_example').mousewheel(fn);    
2. $('div.mousewheel_example').bind('mousewheel', fn);    

mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的，那么滚轮就是向下滚动，正的就是向上。

 

以下是示例的源代码：

[javascript] view plaincopy

1. jQuery(function($) {    
2.     $('div.mousewheel_example')    
3.         .bind('mousewheel', function(event, delta) {    
4.             var dir = delta > 0 ? 'Up' : 'Down',    
5.                 vel = Math.abs(delta);    
6.             $(this).text(dir + ' at a velocity of ' + vel);    
7.             return false;    
8.         });    
9. });    

jquery的鼠标滚轮插件 Mousewheel下载

从GitHub下载其他版本。

 

使用

要使用这个功能，只需对目标元素的’mousewheel’事件绑定事件处理函数即可。

 

Mousewheel插件还提供了两个事件函数：mousewheel和unmousewheel，可以对目标元素调用这两个函数，并在参数中指定回调函数。

 

事件的回调函数第一个参数为event，第二个参数为delta，代表鼠标滚轮的变化值。

 

以下是上面两种使用方式的示例： 

[javascript] view plaincopy

1. // 绑定方式    
2. $('#my_elem').bind('mousewheel', function(event, delta) {    
3.     console.log(delta);    
4. });    
5.     
6. // 事件函数方式    
7. $('#my_elem').mousewheel(function(event, delta) {    
8.     console.log(delta);    
9. });