图像放大镜：用JavaScript和CSS的原生实现

2023-10-29 19:23:35

前言

图像放大镜是一种常见的前端效果，它允许用户在悬停图像时放大查看细节。这种效果广泛应用于电子商务网站、产品展示页面以及任何需要放大图像的场景。在本文中，我们将使用原生JavaScript和CSS来实现一个简单的图像放大镜。

HTML结构

首先，我们需要创建一个简单的HTML结构来放置我们的图像和放大镜容器。

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

在这个HTML结构中，<div class="image-container">是图像的容器，<img src="image.jpg" alt="Image">是图像本身，<div class="magnifier-container">是放大镜容器，<img src="image.jpg" alt="Magnified Image">是放大后的图像。

CSS样式

接下来，我们需要添加一些CSS样式来设置图像和放大镜的样式。

.image-container {
  position: relative;
}

.magnifier-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.magnifier-container img {
  transform: scale(2);
  transform-origin: 0 0;
}

在这个CSS样式中，.image-container的position属性设置为relative，以便将放大镜容器定位在其内部。.magnifier-container的position属性设置为absolute，以便将其定位在图像之上。.magnifier-container img的transform属性设置为scale(2)，以便将其放大到原始大小的两倍。transform-origin属性设置为0 0，以便将放大镜的中心定位在图像的左上角。

JavaScript代码

最后，我们需要添加一些JavaScript代码来实现放大镜的效果。

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

imageContainer.addEventListener('mousemove', (e) => {
  const x = e.clientX - imageContainer.offsetLeft;
  const y = e.clientY - imageContainer.offsetTop;

  magnifierContainer.style.top = `${y - magnifierContainer.offsetHeight / 2}px`;
  magnifierContainer.style.left = `${x - magnifierContainer.offsetWidth / 2}px`;

  magnifierImage.style.left = `-${x * 2}px`;
  magnifierImage.style.top = `-${y * 2}px`;
});

imageContainer.addEventListener('mouseleave', () => {
  magnifierContainer.style.display = 'none';
});

在这个JavaScript代码中，我们首先获取了图像容器、放大镜容器和放大镜图像的DOM元素。然后，我们为图像容器添加了一个mousemove事件监听器。当鼠标在图像容器中移动时，这个事件监听器将触发。在事件处理函数中，我们计算出鼠标相对于图像容器的坐标。然后，我们使用这些坐标来设置放大镜容器和放大镜图像的位置。

我们还为图像容器添加了一个mouseleave事件监听器。当鼠标离开图像容器时，这个事件监听器将触发。在事件处理函数中，我们将放大镜容器隐藏起来。