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中的new的使用方法与注意事项
May 16 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
Element InputNumber计数器的使用方法
Jul 27 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
js微信分享实现代码
2020/10/11 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python字符串处理实现单词反转
2017/06/14 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python爬取梨视频的示例
2021/01/29 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
婚前协议书范本
2014/10/27 职场文书
介绍信模板
2015/01/31 职场文书
2015年人事科工作总结
2015/04/28 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL