事件对象实现放大镜的特效

要实现放大镜的特效，可以使用事件对象来捕获鼠标在图片上的移动，并在放大镜区域显示放大后的图片。

具体实现步骤如下：

1. 在 HTML 中添加一个图片和一个放大镜区域（可以使用 div 元素），并设置它们的位置和大小。

2. 在 JavaScript 中获取图片和放大镜区域的元素，并为图片添加 mousemove 事件监听器。

3. 在事件监听器中计算鼠标在图片上的位置，并将放大镜区域定位到该位置。

4. 根据鼠标位置和放大倍数，计算出放大后的图片的位置和大小，并将其设置为放大镜区域的背景图片。

以下是示例代码：

HTML：

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

CSS：

.image-container {
  position: relative;
}

.magnifier {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  display: none;
}

JavaScript：

const container = document.querySelector('.image-container');
const image = container.querySelector('img');
const magnifier = container.querySelector('.magnifier');

image.addEventListener('mousemove', function(event) {
  const containerRect = container.getBoundingClientRect();
  const mouseX = event.clientX - containerRect.left;
  const mouseY = event.clientY - containerRect.top;

  magnifier.style.display = 'block';
  magnifier.style.left = mouseX - magnifier.offsetWidth / 2 + 'px';
  magnifier.style.top = mouseY - magnifier.offsetHeight / 2 + 'px';

  const bgPosX = -mouseX * 3 + magnifier.offsetWidth / 2;
  const bgPosY = -mouseY * 3 + magnifier.offsetHeight / 2;
  magnifier.style.backgroundImage = `url('${image.src}')`;
  magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
});

在此示例中，放大倍数为 3，可以根据需要进行调整。同时，为了避免放大镜区域超出图片范围，可以在计算位置时进行边界检查。