js的放大镜原理

这个放大镜特效的原理是通过鼠标在容器内移动时，根据鼠标在容器内的位置计算出相应的放大区域，并将其在放大镜中显示出来。

具体的实现原理如下：

1. 当鼠标在容器内移动时，通过事件监听器获取鼠标相对于容器的位置。

2. 根据鼠标位置计算出放大镜中对应的放大区域的位置。

3. 将计算出的放大区域在放大镜中显示出来。

4. 当鼠标离开容器时，隐藏放大镜。

在实现过程中，需要考虑容器的大小、鼠标在容器内的位置、图片的大小以及放大镜的大小，通过这些参数的计算和处理，可以实现一个简单的放大镜特效。

<div class="container">
  <img src="image.jpg" alt="Image" class="img">
  <div class="zoom"></div>
</div>

CSS 样式：

.container {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.img {
  display: block;
  width: 100%;
  height: auto;
}

.zoom {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.6);
  display: none;
  pointer-events: none;
}

JavaScript 代码：

// 获取容器、图片和放大镜元素
const container = document.querySelector('.container');
const img = document.querySelector('.img');
const zoom = document.querySelector('.zoom');

// 当鼠标在容器内移动时
container.addEventListener('mousemove', function(event) {
  // 获取容器的位置和大小
  const containerRect = container.getBoundingClientRect();
  // 计算鼠标在容器内的相对位置
  const x = event.clientX - containerRect.left;
  const y = event.clientY - containerRect.top;

  // 计算鼠标相对于容器的偏移比例
  const offsetX = x / containerRect.width;
  const offsetY = y / containerRect.height;

  // 获取图片的宽度和高度
  const imgWidth = img.width;
  const imgHeight = img.height;

  // 获取放大镜的宽度和高度
  const zoomWidth = zoom.offsetWidth;
  const zoomHeight = zoom.offsetHeight;

  // 根据偏移比例计算背景图像的位置
  const bgPosX = ((imgWidth - zoomWidth) * offsetX) * -1;
  const bgPosY = ((imgHeight - zoomHeight) * offsetY) * -1;

  // 设置放大镜的背景图像和位置
  zoom.style.backgroundImage = `url(${img.src})`;
  zoom.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
  zoom.style.display = 'block';
});

// 当鼠标离开容器时
container.addEventListener('mouseleave', function() {
  // 隐藏放大镜
  zoom.style.display = 'none';
});

以上代码通过 JavaScript 实现了一个简单的放大镜特效。

• 第1行到第3行：获取 HTML 中的容器、图片和放大镜元素。

• 第6行到第23行：在容器上添加mousemove事件监听器，当鼠标在容器内移动时触发。

  • 第9行到第10行：获取容器的位置和大小，计算出鼠标在容器内的相对位置。

  • 第13行到第14行：计算鼠标相对于容器的偏移比例。

  • 第17行到第18行：获取图片的宽度和高度。

  • 第21行到第22行：根据偏移比例计算出背景图像在放大镜中的位置。

  • 第25行到第27行：设置放大镜的背景图像和位置，显示放大镜。

• 第30行到第35行：在容器上添加mouseleave事件监听器，当鼠标离开容器时触发。

  • 第33行：隐藏放大镜。

通过以上代码和注释，你可以实现一个简单的放大镜特效。当鼠标在容器内移动时，根据鼠标的位置在放大镜中显示对应的放大部分，并随鼠标移动位置。当鼠标离开容器时，放大镜隐藏。