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

支持鼠标滚轮可以为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呀,记住是一对一。

阅读更多
换一批

没有更多推荐了,返回首页