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 相关文章推荐
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
Require.js的基本用法详解
Jul 03 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
完美解决js传递参数中加号和&号自动改变的方法
2016/10/11 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
js中的面向对象入门
2017/03/06 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python中set()函数简介及实例解析
2018/01/09 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
thinkphp5 路由分发原理
2021/03/18 PHP
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
中专生自我鉴定范文
2013/12/19 职场文书
给物业的表扬信
2014/01/21 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
1亿有多大教学反思
2014/05/01 职场文书
单身证明范本
2015/06/15 职场文书
大学生创业计划书
2019/06/24 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
Java 死锁解决方案
2022/05/11 Java/Android