实现图片的缩放 - 添加鼠标滑轮事件

1、在点击查看的时候，触发 ng-click = 'selectShow() ' 事件。此处使用的 angularJS：

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

2、编写selectShow()函数：   

 

   /*查看*/
  $scope.selectShow = function(){　　　　//此处需要了解angularJS
　　　　　　// 因为图片是轮播的显示的 这里是获取图片路径 
        var imageIndex = Math.abs($(".ban2 ul")[0].offsetLeft)/900;
        var imgSrc=$scope.webOrigin+"/view/disk/"+$scope.imgList[imageIndex].watermarkfile;
　　　　　 // 这里调用layer弹框 需了解基础的layer知识
        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
        });
　　　　　　// 获取图片节点
        var photoShow = document.getElementById("photoShow");
　　　　　　// 为图片添加指定事件 element.addEventListener("DOM event对象"，function函数，可选布尔值);
        if(photoShow.addEventListener){ // mousewheel、DOMMouseScroll、onmousewheel  滚轮事件
            // 适用于 IE9, Chrome, Safari, Opera 浏览器
            photoShow.addEventListener("mousewheel", MouseWheelHandler, false); 
            // 适用于 Firefox 浏览器
            photoShow.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
        }else{
            // 适用于  IE 6/7/8
            photoShow.attachEvent("onmousewheel", MouseWheelHandler);
        }
        function MouseWheelHandler(e) { 
            var e = window.event || e;　　// 这里是为了实现浏览器兼容，实际完整的写法如下：
            /*function(event) {
                var e = event?event||window.event;
            }*/
            var detal = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //wheelDelta 滚动的距离，像素为单位
            photoShow.style.width = Math.max(50, Math.min(800, photoShow.width + (30 * detal))) + "px"; // 这里是图像放大缩小的边界
            return false;
        }
    };