<div class="wrapper">
  <img id="image"
         alt=""
         src="https://images.pexels.com/photos/459203/pexels-photo-459203.jpeg"/>
</div>

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

img { 
  max-height: 80vh;
  touch-action: none;
}

window.onload = () => {

  // 獲取dom
  const wrapper = document.querySelector(".wrapper");
  const image = document.getElementById("image");
  // 全局變量
  let rect,
    x = 0,
    y = 0,
    scale = 1,
    minScale = 0.2,
    maxScale = 16,
    isPointerdown = false, // 按下標(biāo)識(shí)
    lastPointermove = { x: 0, y: 0 }; // 用于計(jì)算diff

    
  rect = image.getBoundingClientRect()
  // 拖拽查看
  drag();
  // 滾輪縮放
  wheelZoom();

  // 拖拽查看
  function drag() {
    // 綁定 pointerdown
    image.addEventListener("pointerdown", function (e) {
      isPointerdown = true;
      lastPointermove = { x: e.clientX, y: e.clientY };
    });
    // 綁定 pointermove
    image.addEventListener("pointermove", function (e) {
      if (isPointerdown) {
        const current = { x: e.clientX, y: e.clientY };
        x += current.x - lastPointermove.x;
        y += current.y - lastPointermove.y;
        lastPointermove = current;
        image.style.transform = "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ")";
      }
      e.preventDefault();
    });
    // 綁定 pointerup
    image.addEventListener("pointerup", function (e) {
      if (isPointerdown) {
        isPointerdown = false;
      }
    });
  }

  // 滾輪縮放
  function wheelZoom() {
    wrapper.addEventListener("wheel", function (e) {
      let d = e.deltaY < 0 ? 0.1 : -0.1;
      let ratio = 1 + d;

      let temp_scale = scale * ratio;
      if (temp_scale > maxScale) return
      if (temp_scale < minScale) return
      scale = temp_scale

      if (e.target.tagName === "IMG") {
        const max = {
          x: (d * rect.width) / 2,
          y: (d * rect.height) / 2,
        };
        const mouseOffset = {
          x: e.clientX - rect.x,
          y: e.clientY - rect.y
        }
        // 計(jì)算每次的偏移量
        x -= d * (mouseOffset.x - x) - max.x;
        y -= d * (mouseOffset.y - y) - max.y;
        image.style.transform = "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ")";
      }
      e.preventDefault();
    });
  }
}

let scale = 1;
image.addEventListener("wheel", function (e) {
  //d值永遠(yuǎn)是正的0.1或者負(fù)的0.1，代表每次縮放的倍數(shù)
  let d = e.deltaY < 0 ? 0.1 : -0.1;
  scale = scale * (1 + d);
...
});

let d = e.deltaY < 0 ? 0.1 : -0.1;
const max = {
  x: (d * rect.width) / 2,
  y: (d * rect.height) / 2,
};

rect = image.getBoundingClientRect()
const mouseOffset = {
  x: e.clientX - rect.x,
  y: e.clientY - rect.y
}

// 計(jì)算每次的偏移量
x -= d * (mouseOffset.x - x) - max.x;
y -= d * (mouseOffset.y - y) - max.y;
image.style.transform = "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ")";

image.addEventListener("pointerdown", function (e) {
  isPointerdown = true;
  lastPointermove = {x: e.clientX, y: e.clientY};
}); 
image.addEventListener("pointermove", function (e) {
  if (isPointerdown) {
    const current = {x: e.clientX, y: e.clientY};
    x += current.x - lastPointermove.x;
    y += current.y - lastPointermove.y;
    lastPointermove = current;
    image.style.transform = "translate3d(" + x + "px, " + y + "px, 0) scale(" + scale + ")";
  }
  e.preventDefault();
}); 
image.addEventListener("pointerup", function (e) {
  isPointerdown = false;
});