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

    // isFirefox 是伪代码,大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
  1. “mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为120 的倍数,即:幅度大小 = 返回的值 / 120。
  2. “DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3
  3. “mousewheel” 事件在 Opera 10+ 中却是个特例,既有 “event.wheelDelta” 属性,也有 “event.detail” 属性。

JS滚轮事件onmousewheel的更多相关文章

  1. 学习 JS滚轮事件(mousewheel/DOMMouseScroll)

    学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...

  2. JS滚轮事件(mousewheel/DOMMouseScroll)了解

    已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...

  3. js 滚轮事件 滚轮焦点图(轮播图)

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  4. HTML中鼠标滚轮事件onmousewheel处理

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...

  5. HTML中鼠标滚轮事件onmousewheel

    IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onm ...

  6. js滚轮事件

    首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持).w3c文档已经废弃了onmousewheel ...

  7. js滚轮事件需要注意的兼容性问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS滚轮事件封装

    wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.ind ...

  9. js滚轮事件兼容写法

    /** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, ...

随机推荐

  1. 【原】Spring整合Redis(第二篇)—SDR环境搭建具体步骤

    [环境参数] Spring版本:4.2.6.RELEASESpring-Data-Redis版本:1.7.2.RELEASE Redis版本:redis-2.4.5-win32-win64 [简要说明 ...

  2. Tesseract OCR简单实用介绍

    做字符识别,不能不了解google的Tesseract-OCR,但是如何在自己的工程中使用其API倒是语焉不详,官网上倒是很详尽地也很啰嗦地介绍如何重新编译生成适合自己平台的lib和dll,经过近些天 ...

  3. Versaloon -- Connect To Targets

    Versaloon Full open-source(GPLv3) platform for multiple applications, including programmer, debugger ...

  4. 京东SSO单点登陆实现分析

    京东的sso流程: 初始访问状态: cookies: http请求:   1.在首页点击登陆,跳转至passport.360buy.com,给予验证cookie alc(可以试试在提交登陆信息前删除该 ...

  5. Dapper-translation 分布式监控系统

    http://bigbully.github.io/Dapper-translation/ https://github.com/bigbully/Dapper-translation

  6. Android的学习之路(三)项目的启动过程和安装过程具体解释

    应用的安装和启动过程: 安装:第一步:java的编译器会把这个.java文件编译成.class文件           第二部:Android的SDK提供了一个dx工具,这个工具把.class文件转义 ...

  7. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  8. uifont 字体详解

    时间2013-06-04 11:26:33 CSDN博客原文  http://blog.csdn.net/u010013695/article/details/9020611 我们在开发中很多时候要设 ...

  9. 【Android】开源项目汇总-备用

    from://http://www.eoeandroid.com/home.php?mod=space&uid=765778&do=blog&id=47674 Android开 ...

  10. .NET:Assembly.CodeBase vs. Assembly.Location

    The CodeBase is a URL to the place where the file was found, while the Location is the path from whe ...