您和我都知道，向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中，鼠标滚轮不仅可以在网页上上下滑动，实际上，您还可以依靠它来完成更，例如放大和缩小视图平面.
看看实际的示范效果
大多数浏览器支持鼠标滚轮事件，因此您可以先订阅鼠标滚轮事件方法. 触发事件后，您将获得一个名为wheelDelta的属性，该属性表示鼠标滚轮的大小刚好改变，其中正值表示滚轮向下滑动，而负值表示滚轮向上滑动. 该值的绝对值越大，滑动范围越大.
但是不幸的是，仍然有一个不支持鼠标滚轮事件的浏览器. 那就是FireFox. Mozilla已经实现了一个称为“ DOMMouseScroll”的事件. 它将传递一个名为event的事件参数和一个名为detail的事件参数. 但是，此detail属性与wheelDelta不同，后者只能返回正值. 也就是说，只能保持鼠标滚轮向下滚动的值.
您应该特别注意. 苹果还禁用了鼠标滚动来控制页面在Safari浏览器中的上下滑动，但是该功能仍在webkit引擎中正常使用，因此您编写的代码不会触发任何问题.
添加鼠标滚轮事件处理方法
首先我们在网页上添加图片，然后可以使用鼠标滚轮来控制图片的缩放
将内容从XML / HTML代码复制到剪贴板
现在，我们添加鼠标滚轮事件处理代码
XML / HTML代码将内容复制到剪贴板varmyimage = document.getElementById(“ myimage”); if(myimage.addEventListener){// IE9，Chrome，Safari，Opera myimage.addEventListener(“ mousewheel”，MouseWheelHandler，false); // Firefox myimage.addEventListener(“ DOMMouseScroll”，MouseWheelHandler，false);} // IE6 / 7/8 elsemyimage.attachEvent(“ onmousewheel”，MouseWheelHandler);
为了允许不同的浏览器支持处理方法
在以下情况下，我们将反转Firefox的详细信息并返回1或-1
XML / HTML代码将内容复制到剪贴板函数MouseWheelHandler(e){//跨浏览器轮值vare = window.event || e; // oldIEsupport vardelta = Math.max(-1，Math.min(1，(e .wheelDelta || -e.detail))));
现在，我们直接决定图片的大小范围. 以下代码将图片的宽度范围设置为50-800像素
将内容从XML / HTML代码复制到剪贴板myimage.style.width = Math.max(50，Math.min(800，myimage.width +(30 * delta)))+“ px”; returnfalse; }
最后一点，我们在方法中返回false，以终止标准鼠标滚轮事件处理，以防止其上下滑动页面.
查看实际演示
本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-/a/bofangqi/article-305302-1.html
