《CSS和JS结合实现图片放大镜，轻松搞定图片展示新姿势》

前端

2023-01-29 12:19:49

CSS 和 JS 的协奏曲：打造出色的图片放大镜效果

在前端开发的世界中，CSS 和 JS 是缺一不可的黄金搭档，它们携手创造出令人惊叹的效果，图片放大镜效果就是其中之一。

舞台：CSS 为放大镜搭设基地

CSS 负责定义放大镜容器的外观和布局。这个容器是放大镜的基础，其位置、大小和样式都由 CSS 精心控制。

幕后：JS 让放大镜灵动起来

JS 则在幕后掌控着放大镜的行为。它监听鼠标在图片上的移动，并在鼠标悬停时启动放大镜，将图片放大到指定倍数并显示在容器中。当鼠标离开图片时，放大镜会随之消失。

具体操作：打造图片放大镜效果

1. HTML 布局：舞台搭建

首先，我们需要创建 HTML 结构，将图片和放大镜容器放置其中。

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

2. CSS 设置：定义容器样式

然后，我们使用 CSS 定义图片容器和放大镜容器的样式。

.image-container {
  position: relative;
}

.magnifier-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

3. JS 编程：实现放大镜行为

最后，我们用 JS 赋予放大镜生命。

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

image.addEventListener('mousemove', (e) => {
  const {x, y} = e.clientX / image.clientWidth, e.clientY / image.clientHeight;
  magnifier.style.opacity = 1;
  magnifier.style.left = `${x * 100}%`;
  magnifier.style.top = `${y * 100}%`;
});

image.addEventListener('mouseleave', () => {
  magnifier.style.opacity = 0;
});