鼠标滚轮插件

最新推荐文章于 2024-08-26 10:22:46 发布

转载最新推荐文章于 2024-08-26 10:22:46 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yunxianli/p/4172108.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery插件处理鼠标滚轮事件的方法，以实现视觉差滚动效果。由于原生JavaScript的滚轮事件存在兼容性问题且jQuery本身未提供此功能，故采用第三方插件解决。文中提供了具体实现的示例代码。

在做视觉差幻灯片时，为了美观需要将滚动条隐藏掉，没有滚动条就无法出发scroll()事件，所以可以使用鼠标滚轮事件来代替。

使用原生的js鼠标滚轮事件会有兼容性问题，为jQuery也没有实现鼠标滚轮事件，有一款不错的jQuery插件可以弥补

文档: https://github.com/jquery/jquery-mousewheel

实例：http://sandbox.runjs.cn/show/ifz4r8bx

核心代码：

$('body').bind('mousewheel',function(event){
                //三个属性
                //deltaX 不知道是干嘛的
                //deltaY 向下滚为-1，反之为+1
                //deltaFactor 应该是滚动的幅度，不同浏览器不相同 
                 console.log(event.deltaX, event.deltaY, event.deltaFactor);
                 var _this = $(this),
                      top = _this.scrollTop() + event.deltaFactor*event.deltaY*-1;
                 _this.scrollTop(top);
});