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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
一些不错的js函数ajax
Aug 20 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
用原生js做单页应用
Jan 17 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php 文件上传系统手记
2009/10/26 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
php object转数组示例
2014/01/15 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php中session定期自动清理的方法
2015/11/12 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
解决Python一行输出不显示的问题
2018/12/03 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
毕业生自荐书模版
2014/01/04 职场文书
20岁生日感言
2014/01/13 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书