JS滚轮事件onmousewheel
典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 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” 属性。
JS滚轮事件onmousewheel的更多相关文章
- 学习 JS滚轮事件(mousewheel/DOMMouseScroll)
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异 IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...
- js 滚轮事件 滚轮焦点图(轮播图)
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
- HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
- HTML中鼠标滚轮事件onmousewheel
IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onm ...
- js滚轮事件
首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持).w3c文档已经废弃了onmousewheel ...
- js滚轮事件需要注意的兼容性问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS滚轮事件封装
wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.ind ...
- js滚轮事件兼容写法
/** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, ...
随机推荐
- BZOJ2278 : [Poi2011]Garbage
如果两个环相交,那么相交的部分相当于没走. 因此一定存在一种方案,使得里面的环都不相交. 把不需要改变状态的边都去掉,剩下的图若存在奇点则无解. 否则,每找到一个环就将环上的边都删掉,时间复杂度$O( ...
- IMG镜像写盘工具physdiskwrite,用于MikroTik RouterOS的安装(Windows)
常用img的备份: 1.linux下使用dd,Windows下使用WinImage 2.或者还有很多,比如再生龙等等. img还原: 1.Win32DiskImager 2.physdiskwrite ...
- 三星打印机SCX-4824HN全套驱动(打印/扫描)
链接: https://pan.baidu.com/s/1EUXsti4niHlYcMHMJqqnXA 密码: r91a
- 使用CefSharp在.Net程序中嵌入Chrome浏览器(八)——Cookie
CEF中的Cookie是通过CookieManager来管理的,可以用它来设置发送的Cookie. 发送Cookie 发送Cookie的一个基本示例如下: var cookieManager = _c ...
- C++学习笔记23,类内函数重载
该博文仅用于交流学习.请慎用于不论什么商业用途,本博主保留对该博文的一切权利. 博主博客:http://blog.csdn.net/qq844352155 转载请注明出处: 在一个类内,最常见的就是构 ...
- 内存映射函数remap_pfn_range学习——代码分析(3)
li {list-style-type:decimal;}ol.wiz-list-level2 > li {list-style-type:lower-latin;}ol.wiz-list-le ...
- Android控件之ImageSwticher
Android控件之ImageSwticher 1. ImageSwticher介绍 ImageSwitcher是图片切换的控件,它能实现图片切换时的动画效果,包括图片导入效果.图片消失效果等等.An ...
- CCBAnimationManager
#ifndef __CCB_CCBANIMATION_MANAGER_H__ #define __CCB_CCBANIMATION_MANAGER_H__ #include "cocos2d ...
- java获取视频播第一帧
FFMPEG 功能很强大,做视频必备的软件.大家可通过 http://ffmpeg.org/ 了解.Windows版本的软件,可通过 http://ffmpeg.zeranoe.com/builds/ ...
- OPTAUTH 两步验证详解
先贴图: 在对外网开放的后台管理系统中,使用静态口令进行身份验证可能会存在如下问题: (1) 为了便于记忆,用户多选择有特征作为密码,所有静态口令相比动态口令而言,容易被猜测和破解: (2) 黑客可以 ...