点击图片弹出新图层，鼠标滚动控制图片大小

photo.html

新建div标签，显示img图片，新建一个img空标签作为新图层

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./photo.css">
  <script type="text/javascript" src="photo.js"></script>
</head>
<body>
<div class="second">
  <img src="./image/photo.png" alt="文本图片" id="oImage" onClick="btnClick()">
</div>
<img src="" alt="" id="tanchuimg" onmousewheel="return Picture();">
</body>

photo.css

.second {
   
    width: 100px;
    height: 100px;
    /*内部文字垂直水平居中*/
    text-align: center;
    line-height: 100px;
}

.second img {
   
    width: 100%;
    height: 100%;
    margin-top: 30px;
}

#tanchuimg {
   
    /*默认新图层不显示*/
    display: none;
    width: 600px;
    height: 600px;
    /*水平水平居中*/
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

photo.js

第一次点击小图片时，页面弹出新的图层显示图片，可以通过鼠标滚动来控制图片的显示大小，第二次点击小图片时，新图层消失，循环反复

//设置flag，用于判断是否显示新的图层
var flag=false;
function btnClick(){
   
  //falg取反
  flag = !flag;
  //放falg=true时，显示新的图层
  if(flag){
   
    document.getElementById('tanchuimg').style.display = "block";
    document.getElementById('tanchuimg').src="./image/photo.png";
  }
  //否则关闭新图层
  else {
   
    document.getElementById('tanchuimg').style.display = "none";
  }
}

var count = 10;
function Picture() {
   
  count = Counting(count);
  Resize(count);
  return false;
}

//判断鼠标滑轮滚动的距离，如果滚动大于120，则放大一倍
function Counting(count) {
   
  if(event.wheelDelta >= 120){
   
    count++;
  }
  //判断鼠标滑轮滚动的距离，如果滚动小于120，则缩小一倍
  else if(event.wheelDelta <= 120) {
   
    count--;
  }
  return count;
}

//控制百分比
function Resize(count) {
   
  tanchuimg.style.zoom = count + '0%';
  oCounter.innerText = count + '0%';
}

效果展示