鼠标滚轮事件----jquery-mousewheel
来源:互联网 发布:淘宝电子发票在哪里 编辑:程序博客网 时间:2024/06/10 15:03
1.浏览器兼容性问题
Firefox 鼠标滚轮向上滚动是-3,向下滚动是3
IE 鼠标滚轮向上滚动是120,向下滚动是-120
Safari 鼠标滚轮向上滚动是360,向下滚动是-360
Opera 鼠标滚轮向上滚动是120,向下滚动是-120
Chrome 鼠标滚轮向上滚动是120,向下滚动是-120
2.jquery-mousewheel
jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。
使用mousewheel事件有以下两种方式:
使用mousewheel和unmousewheel事件函数;
使用经典的bind和unbind函数。
[javascript] view plaincopy
- $('div.mousewheel_example').mousewheel(fn);
- $('div.mousewheel_example').bind('mousewheel', fn);
mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event外,还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的,那么滚轮就是向下滚动,正的就是向上。
以下是示例的源代码:
[javascript] view plaincopy
- jQuery(function($) {
- $('div.mousewheel_example')
- .bind('mousewheel', function(event, delta) {
- var dir = delta > 0 ? 'Up' : 'Down',
- vel = Math.abs(delta);
- $(this).text(dir + ' at a velocity of ' + vel);
- return false;
- });
- });
jquery的鼠标滚轮插件 Mousewheel下载
从GitHub下载其他版本。
1.使用实例
var divTwo = $('.divTwo'); //1.禁用div的滚轮事件 $('.divTwo').mousewheel(function (e) { return false; }); //2.如果滚动条到底底部的时候 禁用window的滚轮滚动 //3.判断滚动的方向 divTwo.mousewheel(function (e, delta) { var decoration = delta > 0 ? 'Up' : 'down'; $('.divFixed').text(decoration); var scrollTop = divTwo.scrollTop(); var scrollHegiht = divTwo[0].scrollHeight; var height = divTwo.height(); //滚动条 到底部且 滚轮向下滚动 if (scrollTop + height >= scrollHegiht && delta < 0) { e.preventDefault(); } //滚动条 到顶部 且滚轮向上 else if (scrollTop == 0 && delta > 0) { e.preventDefault(); } }); $(document).mousewheel(function (e, delta) { $('.divFixed').text(delta); });
0 0
- 鼠标滚轮事件----jquery-mousewheel
- jQuery 鼠标滚轮插件 mousewheel
- 鼠标滚轮插件jQuery mousewheel
- jQuery 鼠标滚轮插件 mousewheel
- jquery的鼠标滚轮插件 Mousewheel响应跨浏览器的鼠标滚轮事件
- jquery的鼠标滚轮插件 Mousewheel响应跨浏览器的鼠标滚轮事件
- mouseWheel in WindowsFormsHost(鼠标滚轮事件)
- html5鼠标滚轮事件mousewheel使用
- html5鼠标滚轮事件mousewheel使用
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- jquery 鼠标滚轮事件
- JQuery鼠标滚轮事件
- C# 中panel的mousewheel鼠标滚轮事件触发
- C#winform用鼠标滚轮控制图片大小,MouseWheel事件
- Winform 中panel的mousewheel鼠标滚轮事件触发
- C# 中手动添加Mousewheel鼠标滚轮事件
- C# 中panel的mousewheel鼠标滚轮事件触发
- 开源软件安装三部曲
- 【Android】九宫格手势锁简单实现
- IE7浏览器z-index问题的解决方法
- javadoc 使用中解决不能编码问题
- MySql优化--索引优化
- 鼠标滚轮事件----jquery-mousewheel
- 工程实训-银行储蓄系统
- 类的扩展(一):继承
- android 来电自动接听和自动挂断
- JavaScript的特殊函数
- A==B?(java大数做高精度)
- 网站开发基本常识
- Java Web Service
- 第K回文数