如何在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, Operamyimage.addEventListener("mousewheel", MouseWheelHandler, false);// Firefoxmyimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);

跨浏览器mousewheel事件处理函数

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

function MouseWheelHandler(e) {// cross-browser wheel deltavar e = window.event || e; // old IE supportvar 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页面中使用鼠标滚轮事件相关推荐

js中的鼠标滚轮事件
## 事件对象 event1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)window.onclick = functi ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
鼠标滚轮事件java_JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点...
焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HT ...
javascript编程题_JavaScript中的鼠标滚轮编程
javascript编程题 In this article I'll describe cross-browser techniques for using the mouse wheel (or & ...
html鼠标滚轮不滚动页面,Windows10系统鼠标滚轮无法滚动页面如何解决
如果遇到界面无法全部显示情况的话,那么win10系统用户就可以使用鼠标滚轮进行滚动翻页,方便阅读.不过,也有一些朋友会碰到无法在原本可以翻页的界面中使用鼠标滚轮翻页的问题,这是怎么回事呢?我们该如何操 ...
php 输出带参数整个html页面,如何在PHP页面中原样输出HTML代码（是该找本php的数来看了）...
如何在PHP页面中原样输出HTML代码(是该找本php的数来看了) 一.总结一句话总结:字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. 1.php中的html标签如何 ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...

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

如何在HTML5页面中使用鼠标滚轮事件相关推荐

最新文章

热门文章