如何获取放大图像的X与Y坐标？（悬停放大+点击显坐标场景）

要实现鼠标悬停显示放大图像，点击时获取对应坐标，可在现有放大逻辑基础上添加点击事件监听，直接复用已计算的坐标数据即可，具体实现如下：

核心思路 #

1. 原有逻辑已在鼠标移动时计算出鼠标在原图容器内的相对坐标，这就是原图上被放大区域的对应坐标；
2. 添加点击事件监听，点击时读取实时存储的坐标值，或直接获取放大层自身的页面坐标；
3. 可将坐标信息通过控制台输出，或在页面上直观展示。

修改后的完整代码 #

HTML

<div>鼠标悬停图片查看放大效果，点击查看对应坐标</div>
<div id="img-zoomer-box">
  <img src="https://images.unsplash.com/photo-1472458258899-c48d47f2e53d?dpr=2&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=" id="img-1" />
  <div id="img-2"></div>
</div>
<div id="coordinate-info"></div>

CSS

body {
  margin: 12% 30%;
  height: 450px;
  overflow: scroll;
  font-family: Arial, sans-serif;
  color: #333;
  background: #f4f4f4;
}

#img-zoomer-box {
  width: 500px;
  height: auto;
  position: relative;
  margin-top: 10px;
}

#img-1 {
  width: 100%;
  height: auto;
}

#img-zoomer-box:hover,
#img-zoomer-box:active {
  cursor: zoom-in;
  display: block;
}

#img-zoomer-box:hover #img-2,
#img-zoomer-box:active #img-2 {
  opacity: 1;
}

#img-2 {
  width: 340px;
  height: 340px;
  background: url('https://images.unsplash.com/photo-1472458258899-c48d47f2e53d?dpr=2&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=') no-repeat #FFF;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  position: absolute;
  opacity: 0;
  border: 4px solid whitesmoke;
  z-index: 99;
  border-radius: 100%;
  display: block;
  transition: opacity .2s;
}

#coordinate-info {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
}

JavaScript

const zoomer = (() => {
  const imageBox = document.querySelector("#img-zoomer-box");
  const original = document.querySelector("#img-1");
  const magnified = document.querySelector("#img-2");
  const coordinateInfo = document.querySelector("#coordinate-info");
  
  // 实时存储鼠标在原图上的坐标
  let currentPos = { x: 0, y: 0 };

  function handleMouseMoves(e) {
    const style = magnified.style;
    const x = e.pageX - this.offsetLeft;
    const y = e.pageY - this.offsetTop;
    const imgWidth = original.offsetWidth;
    const imgHeight = original.offsetHeight;
    let xperc = (x / imgWidth) * 100;
    let yperc = (y / imgHeight) * 100;

    // 更新当前坐标
    currentPos = { x, y };

    // 兼容鼠标超出图像边缘的放大显示
    if (x > 0.01 * imgWidth) {
      xperc += 0.15 * xperc;
    }
    if (y >= 0.01 * imgHeight) {
      yperc += 0.15 * yperc;
    }

    style.backgroundPositionX = `${xperc - 9}%`;
    style.backgroundPositionY = `${yperc - 9}%`;
    style.left = `${x - 180}px`;
    style.top = `${y - 180}px`;
  }

  function handleImageClick() {
    // 获取原图对应坐标
    const originalX = Math.round(currentPos.x);
    const originalY = Math.round(currentPos.y);
    // 获取放大层的页面坐标
    const zoomX = Math.round(magnified.offsetLeft);
    const zoomY = Math.round(magnified.offsetTop);
    
    // 在页面展示坐标
    coordinateInfo.textContent = `原图点击坐标：X=${originalX}, Y=${originalY} | 放大层页面坐标：X=${zoomX}, Y=${zoomY}`;
    // 控制台输出坐标
    console.log('原图对应坐标：', { originalX, originalY });
    console.log('放大层页面坐标：', { zoomX, zoomY });
  }

  imageBox.addEventListener("mousemove", handleMouseMoves);
  imageBox.addEventListener("click", handleImageClick);
})();

关键说明 #

• currentPos 用于实时缓存鼠标在原图容器内的相对位置，点击时直接读取即可得到原图上的对应坐标；
• 若需要放大层自身的页面位置，可通过magnified.offsetLeft和magnified.offsetTop获取；
• 坐标值做了取整处理，提升展示可读性，可根据需求调整精度。

内容的提问来源于stack exchange，提问作者Caroline Torres