html5 鼠标滚轮,如何在HTML5页面中使用鼠标滚轮事件

鼠标滚轮,如何在HTML5页面中使用鼠标滚轮事件"/>

html5 鼠标滚轮,如何在HTML5页面中使用鼠标滚轮事件

支持鼠标滚轮可以为HTML5网页增加更多的交互性。不仅是滚动页面，您还可以执行不同的操作，如放大或缩小。

查看鼠标滚轮演示页面…

大多数的浏览器都支持元素的“mousewheel”事件。您可以注册一个处理函数，在该函数上作用一个事件对象。这就暴露出了wheelDelta属性;向上滚动是正值 向下滚动的负值。值越大或越小，运动就越快越慢。

但不行的是，有一个浏览器是不支持mousewheel这个事件，它就是火狐浏览器 。Mozilla实现了一个“DOMMouseScroll”事件。它传递一个具有detail属性的事件对象，但是，与wheelDelta不同的是，它返回的是正值向下滚动。所以，一直以来对于Mozilla采用的这种事件，我们发现一个奇怪的地方，对于IE6它实际上是更容易编码！它并不像你每天都 听到的那样。

您还应该注意，Apple禁用Safari中的滚动，但是webkit引擎中提供了支持，因此您的代码不会导致任何问题

添加mousewheel事件处理程序

我们来添加一个图像到我们的网页上，响应鼠标滚轮来控制图片的放大和缩小：

我们现在可以添加mousewheel事件处理程序了：

var myimage = document.getElementById("myimage");

if (myimage.addEventListener) {

// IE9, Chrome, Safari, Opera

myimage.addEventListener("mousewheel", MouseWheelHandler, false);

// Firefox

myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

}

// IE 6/7/8

else myimage.attachEvent("onmousewheel", MouseWheelHandler);

跨浏览器mousewheel事件处理函数

我们的MouseWheelHandler现在可以确定滚轮移动增量了。在这种情况下，我们要反转Firefox的详细信息值，并返回1表示向上，或返回-1表示向下：

function MouseWheelHandler(e) {

// cross-browser wheel delta

var e = window.event || e; // old IE support

var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

我们现在就可以相应地确定图像的大小了。下面的代码设置的宽度在50px和800px之间，但你是可以确定图像的实际尺寸并使用它。

myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

return false;

最后，我们返回false来取消正常滚动页面的标准事件

点击这里查看效果

上面的代码可以在IE6,7,8上面执行，但是safari没有任何事情发生。

如果你喜欢我翻译的这篇文章可以联系我 我也做一对一的辅导，只能web呀，记住是一对一。