码前课-前端必修课-如何在HTML5页面中使用鼠标滚轮事件

885 05-11

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

大多数的浏览器都支持元素的“mousewheel”事件。您可以注册一个处理函数，在该函数上作用一个事件对象。这就暴露出了wheelDelta属性;向上滚动是正值向下滚动的负值。值越大或越小，运动就越快越慢。
但不行的是，有一个浏览器是不支持mousewheel这个事件，它就是火狐浏览器。Mozilla实现了一个“DOMMouseScroll”事件。它传递一个具有detail属性的事件对象，但是，与wheelDelta不同的是，它返回的是正值向下滚动。所以，一直以来对于Mozilla采用的这种事件，我们发现一个奇怪的地方，对于IE6它实际上是更容易编码！它并不像你每天都听到的那样。

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

添加mousewheel事件处理程序

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

<img id="myimage" src="myimage.jpg" alt="my image" />

我们现在可以添加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呀，记住是一对一。

学完还行练？点这里。

标签： HTML5