其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 却不支持此事件，不过庆幸 Firefox  中提供了另外一个等同的事件：”DOMMouseScroll” 。

OK，我们现在已经知道了不同浏览器之间实现的差别，兼容代码如下：

var addEvent = (function () {

if (window.addEventListener) {

return function (el, sType, fn, capture) {

el.addEventListener(sType, fn, (capture));

};

} else if (window.attachEvent) {

return function (el, sType, fn, capture) {

el.attachEvent("on" + sType, fn);

};

} else {

return function () {};

}

})(),

// isFirefox 是伪代码，大家可以自行实现

mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// object 也是伪代码，你需要注册 Mousewheel 事件的元素

addEvent(object, mousewheel, function (event) {

event = window.event || event;

// todo something

}, false);

我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：

1. 页面字体到底是放大还是缩小呢？ ==> 鼠标滚轮是向上滚动还是向下滚动呢？

2. 页面字体缩放的倍数到底是多少呢？ ==> 鼠标滚轮滚动的幅度大小是多少呢？

还好，我们可以通过 event 的某些属性值得到这些信息：

1. “mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。

2. “DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反)，如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。

3. “mousewheel” 事件在 Opera 10+ 中却是个特例，既有 “event.wheelDelta” 属性，也有 “event.detail” 属性。

注：上面第三点，在《The onmousewheel event of JavaScript》一文中有这样一段批注：

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail”

instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE's.

但经测试， Opera 9+ 和 Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致，未发现异常与错误，从接口角度来说，代码中应优先使用 “event.wheelDelta” 属性。此时代码如下：

var addEvent = (function () {

if (window.addEventListener) {

return function (el, sType, fn, capture) {

el.addEventListener(sType, fn, (capture));

};

} else if (window.attachEvent) {

return function (el, sType, fn, capture) {

el.attachEvent("on" + sType, fn);

};

} else {

return function () {};

}

})(),

stopEvent : function (event) {

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

},

zoomIn = function () {},

zoomOut = function () {},

// isFirefox 是伪代码，大家可以自行实现

mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// object 是伪代码，你需要注册 Mousewheel 事件的元素

addEvent(object, mousewheel, function (event) {

var delta = 0;

event = window.event || event;

stopEvent(event);

delta = event.wheelDelta ? (event.wheelDelta / 120) : ( - event.detail / 3);

// zoomIn, zoomOut 是伪代码，需要实现的缩放事件

delta > 0 ? zoomIn(delta) : zoomOut(Math.abs(delta));

}, false);

jquery插件默认是不支持鼠标中轮滚轮事件的，现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。

使用mousewheel事件有以下两种方式：

使用mousewheel和unmousewheel事件函数；

使用经典的bind和unbind函数。

$('div.mousewheel_example').mousewheel(fn);

$('div.mousewheel_example').bind('mousewheel', fn);

mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的，那么滚轮就是向下滚动，正的就是向上。

以下是示例的源代码：

jQuery(function($) {

$('div.mousewheel_example')

.bind('mousewheel', function(event, delta) {

var dir = delta > 0 ? 'Up' : 'Down',

vel = Math.abs(delta);

$(this).text(dir + ' at a velocity of ' + vel);

return false;

});

});

使用

要使用这个功能，只需对目标元素的’mousewheel’事件绑定事件处理函数即可。

Mousewheel插件还提供了两个事件函数：mousewheel和unmousewheel，可以对目标元素调用这两个函数，并在参数中指定回调函数。

事件的回调函数第一个参数为event，第二个参数为delta，代表鼠标滚轮的变化值。

以下是上面两种使用方式的示例：

// 绑定方式

$('#my_elem').bind('mousewheel', function(event, delta) {

console.log(delta);

});

// 事件函数方式

$('#my_elem').mousewheel(function(event, delta) {

console.log(delta);

});

jquery的鼠标滚轮插件 Mousewheel下载

Winform 中panel的mousewheel鼠标滚轮事件触发

如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现 滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...

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

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

JS鼠标滚轮事件详解

鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

js鼠标滚轮事件兼容

JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...

jQuery禁用、开启鼠标滚轮事件

1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...

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

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

js中的鼠标滚轮事件

## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

VC 鼠标滚轮事件控制绘图的问题

问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...

js鼠标滚轮事件

不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...

随机推荐

Windows下MySQL无法启动

问题描述: 从网上下了5.7 的MySQL,在bin目录下执行 start mysqld ,弹出个cmd窗口一闪就没了,也看不清是什么报错.mysqld --install安装了服务,也启动不了.   ...

Linux系统开机默认开启无线网卡

Linux系统每次重新启动时,不会重新打开无线网卡,需要每次手动去更改. 这里通过两种方式开启无线网卡. 第一种方式就是手动连接到Linux系统,(前提是按照了Linux桌面) 1.找到文件夹为 et ...

iOS UIScrollView的使用

一.为什么要用UIScrollView? 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容普通的UIVie ...

EL表达式详解及应用实例

1. EL是JSP内置的表达式语言! * jsp2.0开始,不让再使用java脚本,而是使用el表达式和动态标签来替代java脚本! * EL替代的是,也就是说,EL只 ...

BlazeMeter发布chrome扩展插件，支持JMeter脚本创建

BlazeMeter发布chrome扩展插件,支持JMeter脚本创建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...

Helpers\Data

Helpers\Data Data helper contains a bunch of useful methods for looking at and altering your data. D ...

Obj-C中内存的管理一瞥

注意,ARC仅仅(自动)释放你手工管理的Objective-C类实例的内存, 但是不会释放由C函数或者Core Foundation(Cocoa的底层,C语言的变体)申请的内存.

Asp.net 项目部署的两个问题

1:关于MVC中BundleCollection压缩js css文件 发布后获取失败的问题 原因是: 默认本地vs里面调试的时候,因为web.config文件里面有一个debug属性,当有此属性时,默 ...

Hard Rock

Ilya is a frontman of the most famous rock band on Earth. Band decided to make the most awesome musi ...

POJ 2685

#include #include #define MAXN 26 using namespace std; int _map[MAXN ...