JS——点击放大图片或鼠标滚动方法图片（大小图对应选择）

本文链接：https://blog.csdn.net/spfLinux/article/details/78644173

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/3.css">
  </head>
  <body>
    <div class="head">
        <div class="head_a" align="center">
          <a href="#" οnclick="doImgOp(1)">-</a>
          <a href="#" οnclick="doImgOp(2)">Auto</a>
          <a href="#" οnclick="doImgOp(3)">+</a>
        </div>
    </div>
    <div class="sec1">
      <img src="img/timg.jpg" alt="" id="sec1_img" class="sec1_img">
    </div>
    <div class="sec2">
      <img src="img/1.jpg" alt="" id="sec2_img1" οnclick="getImg(1)">
      <img src="img/2.jpg" alt="" id="sec2_img2" οnclick="getImg(2)">
      <img src="img/3.jpg" alt="" id="sec2_img3" οnclick="getImg(3)">
    </div>
    <div class="sec3" align="center">
      <a href="#">上一页</a>
      <a href="#">下一页</a>
    </div>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
      //闭包
      function ImgOp() {
        var mul = 1;
        console.log("large");
        return function(num){
          if(num == 1){
            mul /= 1.2;
          }else if(num == 2){
            mul = 1;
          }else if(num == 3){
            mul *= 1.2;
          }else if(num == 4){
            mul *= 1.1;
          }else if(num == 5){
            mul /= 1.1;
          }
          getId("sec1_img").style.transform = ("scale("+mul+")");
        }
      }

    doImgOp = ImgOp();
    console.log(doImgOp);

    function getImg(id) {
      var path = getId("sec2_img"+id).src;
      console.log(path);
      getId("sec1_img").src = path;
    }

    //下面代码参考：https://www.cnblogs.com/Wu-W-Sen/archive/2015/05/28/4535834.html
    var scrollFunc = function (e) {
     e = e || window.event;
     if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
         if (e.wheelDelta > 0) { //当滑轮向上滚动时
            // alert("滑轮向上滚动");
            doImgOp(4);
         }
         if (e.wheelDelta < 0) { //当滑轮向下滚动时
            // alert("滑轮向下滚动");
           doImgOp(5);
         }
     } else if (e.detail) {  //Firefox滑轮事件
         if (e.detail> 0) { //当滑轮向上滚动时
             //alert("滑轮向上滚动");
             doImgOp(4);
         }
         if (e.detail< 0) { //当滑轮向下滚动时
            // alert("滑轮向下滚动");
            doImgOp(5);
         }
     }
 }
 //给页面绑定滑轮滚动事件
 if (document.addEventListener) {//firefox
     document.addEventListener('DOMMouseScroll', scrollFunc, false);
 }
 //滚动滑轮触发scrollFunc方法  //ie 谷歌
 window.onmousewheel = document.onmousewheel = scrollFunc;
    </script>
  </body>
</html>