js拖动图片放大缩小

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Zoom Image</title>
<style>
  #image {
    position: absolute;
    cursor: grab;
  }
</style>
</head>
<body>
<img id="image" src="path_to_your_image.jpg" alt="Drag me">

<script>
  let isDragging = false;
  let startX, startY;
  let scale = 1;
  const image = document.getElementById('image');

  image.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX - image.offsetLeft;
    startY = e.clientY - image.offsetTop;
  });

  window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    image.style.left = `${e.clientX - startX}px`;
    image.style.top = `${e.clientY - startY}px`;
  });

  window.addEventListener('mouseup', () => {
    isDragging = false;
  });

  image.addEventListener('wheel', (e) => {
    e.preventDefault();
    const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
    scale *= zoomFactor;
    image.style.transform = `scale(${scale})`;
  });
</script>
</body>
</html>