js 滚动鼠标滑轮放大缩小图片

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34