<div>
  <h1>原图</h1>
  <img
    src="https://so.360tres.com/dmsmty/160_160_100/t01b29734b9604fb7aa.webp"
  />

  <h1>可放大缩小的图</h1>
  <div class="imgView">
    <img
      src="https://so.360tres.com/dmsmty/160_160_100/t01b29734b9604fb7aa.webp"
    />
    <img
      src="https://so.360tres.com/dmsmty/160_160_100/t01b29734b9604fb7aa.webp"
    />
  </div>
</div>
<script>
  const imgView = document.querySelector(".imgView");

  // 鼠标经过事件
  imgView.onmouseover = (e1) => {
    if (e1.target.nodeName === "IMG") {
      var img = e1.target;
      var widthW = img.width;

      // 鼠标滚动事件
      img.onmousewheel = (e) => {
        // wheelDelta 判断滚轮往前滚还是往后滚：   <0 是往后滚， >0是前滚
        e.wheelDelta < 0 ? widthW-- : widthW++;
        img.style.width = widthW;
      };
    }
  };
</script>