Realize the zoom of the picture - add the mouse wheel event

1. When clicking to view, trigger the ng-click = 'selectShow() ' event. angularJS used here:

" 查看<img src='images/selectView.png' ng-click='selectShow()'> 丨"+

2. Write the selectShow() function:   

 

   /* View */ 
  $scope.selectShow = function (){　　　　// You need to know angularJS here 
　　　　　　// Because the picture is displayed in a carousel, here is the path to get the picture 
        var imageIndex = Math.abs($(".ban2 ul" )[0].offsetLeft)/900;
         var imgSrc=$scope.webOrigin+"/view/disk/"+ $scope.imgList[imageIndex].watermarkfile;
　　　　　  // The basic layer knowledge is required to call the layer popup here 
        var index = layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            content: "<div style='text-align:center;'><img id='photoShow' src='"+imgSrc+"'/></div>", //图片
            area: ['96%', '96%'],
            skin: 'layui-layer-nobg',
            shadeClose: true
        });
　　　　　　// Get the picture node 
        var photoShow = document.getElementById("photoShow" );
　　　　　　// Add the specified event to the picture element.addEventListener("DOM event object", function function, optional boolean value); 
        if (photoShow.addEventListener){ // mousewheel, DOMMouseScroll, onmousewheel wheel events 
            // for IE9, Chrome, Safari, Opera browser 
            photoShow.addEventListener("mousewheel", MouseWheelHandler, false ); 
             // for Firefox browser 
            photoShow.addEventListener("DOMMouseScroll", MouseWheelHandler, false );
        } else {
             // For IE 6/7/8 
            photoShow.attachEvent("onmousewheel" , MouseWheelHandler);
        }
        function MouseWheelHandler(e) { 
             var e = window.event || e;　　// This is for browser compatibility, the actual complete writing is as follows: 
            /* function(event) {
                var e = event?event||window.event;
            } */ 
            var detal = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // wheelDelta scrolling distance in pixels 
            photoShow.style.width = Math .max(50, Math.min(800, photoShow.width + (30 * detal))) + "px"; // Here is the border of image zoom in and out 
            return  false ;
        }
    };