html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能

您和我都知道，向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-fly.com/a/bofangqi/article-305302-1.html