鼠标滚轮事件

通过一个小例子来介绍鼠标的滚轮事件，通过鼠标向上滚动来放大图片，向下滚动来缩小图片
下面是HTML文档

  <!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>滚轮练习</title>
    <style type="text/css">
        img{
            width: 200px;

        }
    </style>
    </head>
    <body>
        <img src="2.jpg">
    </body>
    <script type="text/javascript" src="mousewheel.js"></script>
    <script type="text/javascript">
        var img=document.getElementsByTagName("img")[0];
        var scales=1;
        wheel(img,function (value){
            if(value){
                if(scales<4){
                    scales+=0.1;
                    img.style.transform="scale("+scales+")";
                }
            }else{
                if(scales>0.4){
                    scales-=0.1;
                    img.style.transform="scale("+scales+")";
                }
            }
        })
    </script>
</html>

下面是封装的滚轮事件

  //onmousewheel;针对于非火狐浏览器
  // 向上滚动是负值
  //火狐浏览器滚动方式
  // 向上滚动是正值
  //封装函数返回向上或者向下
  function wheel(obj,callback){
      // 标记当前是向上还是向下
      var down=false;
      //判断浏览器是不是火狐
      var str=window.navigator.userAgent;
      if(str.indexOf("Firefox")!=-1){
          obj.addEventListener("DOMMouseScroll",function(e){
          var ev=e || window.event;
          if(ev.detail<0){
              down=true;
          }else{
              down=false;
          }
          callback(down);
       },false);
      }else{
           obj.onmousewheel=function(e){
           var ev=e || window.event;
           if(ev.wheelDelta<0){
              down=false;
           }else{
              down=true;
           }
           // 函数回调 将正确的方向结果返回给前面
           callback(down);
           }
      }
      return down;
  }

运行结果如下：
原图：

11722CA8-4E5D-477E-B7A3-574B3CEEC61E.png

向上滚动放大图片：

B1EAD300-C076-4CBD-A07E-2D78FB1A8B15.png

向下缩小图片：

15EEBA67-DA68-4E7A-9738-06467BFB85CF.png

通过这个函数就可以对图片进行处理了，这个函数可以作为一个插件用来对网页中使用到滚轮事件的地方。

鼠标滚轮事件

推荐阅读更多精彩内容