JS图片操作神器：拖动、缩放、边界，全掌握！

朋友们，你们有没有像我一样，看见电商网站上那些查看商品图片细节的功能，总忍不住点开玩一下？这不，前几天我手贱自己写了一个，结果一发不可收拾，一个晚上就过去了。咳咳，言归正传。

这个功能看着很简单，无非就是图片拖动、图片缩放。但我告诉你，写的过程中坑可不少！今天我就来一一细说，保证让你少走弯路。

1. 图片拖动

首先，咱的结构很简单，唯一的注意事项就是图片加载完成后，再开启拖拽功能。

window.onload = function () {
  const img = document.getElementById("myImg");
  let isDragging = false;

  img.addEventListener("mousedown", (e) => {
    isDragging = true;
    const offsetX = e.clientX - img.offsetLeft;
    const offsetY = e.clientY - img.offsetTop;
  });

  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;
    img.style.left = e.clientX - offsetX + "px";
    img.style.top = e.clientY - offsetY + "px";
  });

  document.addEventListener("mouseup", () => {
    isDragging = false;
  });
};

2. 图片缩放

缩放实现起来也不难，通过修改图片的宽高即可。

const img = document.getElementById("myImg");
const zoomInBtn = document.getElementById("zoomInBtn");
const zoomOutBtn = document.getElementById("zoomOutBtn");

zoomInBtn.addEventListener("click", () => {
  img.style.width = (parseInt(img.style.width) + 10) + "px";
  img.style.height = (parseInt(img.style.height) + 10) + "px";
});

zoomOutBtn.addEventListener("click", () => {
  img.style.width = (parseInt(img.style.width) - 10) + "px";
  img.style.height = (parseInt(img.style.height) - 10) + "px";
});

3. 边界问题

边界问题就比较有意思了。我们要让图片在容器内拖动和缩放，还要避免图片超出容器范围。

// 获取容器尺寸
const container = document.getElementById("container");
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;

// 获取图片尺寸
const img = document.getElementById("myImg");
const imgWidth = img.clientWidth;
const imgHeight = img.clientHeight;

// 移动图片时限制边界
document.addEventListener("mousemove", (e) => {
  if (!isDragging) return;

  // 计算图片移动后的位置
  const newLeft = e.clientX - offsetX;
  const newTop = e.clientY - offsetY;

  // 判断是否超出左边界
  if (newLeft < 0) {
    img.style.left = "0px";
  }

  // 判断是否超出右边界
  if (newLeft + imgWidth > containerWidth) {
    img.style.left = (containerWidth - imgWidth) + "px";
  }

  // 判断是否超出上边界
  if (newTop < 0) {
    img.style.top = "0px";
  }

  // 判断是否超出下边界
  if (newTop + imgHeight > containerHeight) {
    img.style.top = (containerHeight - imgHeight) + "px";
  }
});

好了，上面就是图片拖动、缩放、边界的实现方法。大家可以根据自己的需求进行修改和完善。如果有其他问题，欢迎留言讨论哦！