How to use the Mouse Wheel Event in HTML5 Pages

参考网址：https://www.sitepoint.com/html5-javascript-mouse-wheel/

使用鼠标滚动事件可以让HTML5页面更加的灵活。让一个元素元素放大或者缩小。而不是单纯的滚动一个页面。

对于mouseWheel事件在各个浏览器中存在浏览器兼容性问题。

Firefox：DOMMouseScroll    (detail判断上下滑动)             

IE/Chrome/Safari/Opera：mousewheel  (wheelDelta判断鼠标上下滑动)

注意：苹果禁用Safari滚动，但在webkit下不会出道问题

/*
 * down  e.wheelDelta==-120     e.detail > 0
 * up    e.wheelDelta==120      e.detail < 0
 */

例子：滚动缩放页面中的图片大小

<img src="img/img.jpg" id="myimg">

var myimg = document.getElementById("myimg");
    if(myimg.addEventListener){
      //IE9,Chrome,Safari,Opera
      myimg.addEventListener('mousewheel',MouseWheelHandler,false);
      //Firefox
      myimg.addEventListener('DOMMouseScroll',MouseWheelHandler,false);
    }
    //IE 6/7/8
    else{
      myimg.attachEvent('onmousewheel',MouseWheelHandler);
    }

向下滑缩小图片，向上放大图片，此处注意Firefox的兼容性问题

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)));
      console.log(delta);
      console.log("e.detail"+ e.detail);
      /*
      * down  e.wheelDelta==-120     e.detail > 0
      * up    e.wheelDelta==120      e.detail < 0
      * */
      console.log("e.wheelDelta"+ e.wheelDelta);
      myimg.style.width = Math.max(50,Math.min(800,myimg.width + (30 * delta))) + "px";
      return false;
    }