JS滚轮事件onmousewheel使用介绍


Posted in Javascript onNovember 01, 2013

典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件。在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派,杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” ,兼容代码如下:

// isFirefox 是伪代码,大家可以自行实现 
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel"; “mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为120 的倍数,即:幅度大小 = 返回的值 / 120。 
“DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3。 
“mousewheel” 事件在 Opera 10+ 中却是个特例,既有 “event.wheelDelta” 属性,也有 “event.detail” 属性。
Javascript 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
js验证表单第二部分
Nov 25 Javascript
简单三步,搞掂内存泄漏
Mar 10 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JS实现拖动示例代码
Nov 01 #Javascript
多种方法实现JS动态添加事件
Nov 01 #Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 #Javascript
jQuery Mobile 导航栏代码
Nov 01 #Javascript
js将json格式内容转换成对象的方法
Nov 01 #Javascript
JS实现切换标签页效果实例代码
Nov 01 #Javascript
Javascript delete 引用类型对象
Nov 01 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
js opener的使用详解
2014/01/11 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
js实现密码强度检验
2017/01/15 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python是什么 Python的用处
2020/05/26 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python 如何实现访问者模式
2020/07/28 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
瀑布模型都有哪些优缺点
2014/06/23 面试题
Ruby如何定义一个类
2012/10/08 面试题
幼儿园中班教师寄语
2014/04/03 职场文书
产品质量保证书
2014/04/29 职场文书
优秀教研组申报材料
2014/12/26 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
太空授课观后感
2015/06/17 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python