JavaScript实现图片局部放大镜交互功能

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
</head>
<body>
  <div class="image-container">
    <img src="your-image.jpg" id="image" alt="Your Image">
    <div class="magnifying-glass" id="magnifyingGlass"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.image-container {
  position: relative;
}
#image {
  max-width: 100%;
}
.magnifying-glass {
  position: absolute;
  width: 100px; /* 放大镜的宽度 */
  height: 100px; /* 放大镜的高度 */
  border: 1px solid #ccc; /* 放大镜的边框样式 */
  background: rgba(255, 255, 255, 0.6); /* 放大镜的背景颜色 */
  cursor: none;
  display: none; /* 初始状态下隐藏放大镜 */
}

// 获取元素
const image = document.getElementById('image');
const magnifyingGlass = document.getElementById('magnifyingGlass');
// 定义放大镜的宽度和高度
const glassWidth = 100;
const glassHeight = 100;
// 计算放大镜的背景图片尺寸
const backgroundWidth = image.width * 2; // 放大2倍
const backgroundHeight = image.height * 2;
// 设置放大镜的背景图片
magnifyingGlass.style.backgroundImage = `url('${image.src}')`;
magnifyingGlass.style.backgroundSize = `${backgroundWidth}px ${backgroundHeight}px`;
// 监听鼠标移动事件
image.addEventListener('mousemove', (event) => {
  // 计算放大镜的位置
  const mouseX = event.clientX - image.getBoundingClientRect().left;
  const mouseY = event.clientY - image.getBoundingClientRect().top;
  const glassX = mouseX - glassWidth / 2;
  const glassY = mouseY - glassHeight / 2;
  // 限制放大镜的位置在图片内部
  if (glassX < 0) {
    glassX = 0;
  }
  if (glassX > image.width - glassWidth) {
    glassX = image.width - glassWidth;
  }
  if (glassY < 0) {
    glassY = 0;
  }
  if (glassY > image.height - glassHeight) {
    glassY = image.height - glassHeight;
  }
  // 更新放大镜的位置
  magnifyingGlass.style.left = glassX + 'px';
  magnifyingGlass.style.top = glassY + 'px';
  // 更新放大镜的背景位置
  const backgroundX = -glassX * 2;
  const backgroundY = -glassY * 2;
  magnifyingGlass.style.backgroundPosition = `${backgroundX}px ${backgroundY}px`;
  // 显示放大镜
  magnifyingGlass.style.display = 'block';
});
// 监听鼠标离开事件
image.addEventListener('mouseout', () => {
  // 隐藏放大镜
  magnifyingGlass.style.display = 'none';
});