css初级项目实战中实现图片放大镜效果-css教程-PHP中文网

css初级项目实战中实现图片放大镜效果

P粉602998670

发布： 2025-10-10 11:45:01

原创

135人浏览过

图片放大镜效果通过HTML、CSS和JavaScript实现，用户鼠标悬停时在大图容器中显示小图对应区域的放大视图。1. HTML结构包含小图和大图背景容器；2. CSS设置布局、隐藏大图并配置背景尺寸；3. JavaScript监听鼠标进入、离开和移动事件，动态调整大图背景位置实现跟随放大；4. 建议优化包括使用高清大图、添加交互提示和平滑动画，提升用户体验。该功能是前端事件处理与样式控制结合的经典案例。

css初级项目实战中实现图片放大镜效果

图片放大镜效果是一种常见的网页交互功能，常用于电商网站展示商品细节。用户将鼠标移到小图上时，页面一侧会显示对应区域的放大图。这个效果可以通过 HTML、CSS 和 JavaScript 配合实现，下面是一个适合 CSS 初学者的实战项目步骤。

1. 结构布局（HTML）

先搭建基本的 HTML 结构，包含一张小图和一个用于显示放大区域的大图容器：

<div class="magnifier">
  <img src="small.jpg" alt="小图" class="small-img" />
  <div class="large-img" style="background-image: url('large.jpg');"></div>
</div>

登录后复制

说明：small.jpg 是展示的小图，large.jpg 是高分辨率大图，用作背景图显示在右侧的 .large-img 容器中。

2. 样式设计（CSS）

使用 CSS 控制布局和视觉效果，关键点是隐藏大图容器并设置背景图定位：

立即学习“前端免费学习笔记（深入）”；

.magnifier {
  position: relative;
  width: 400px;
  display: flex;
}
<p>.small-img {
width: 400px;
height: 400px;
cursor: move;
}</p><p>.large-img {
width: 400px;
height: 400px;
margin-left: 20px;
background-size: 800px 800px; /<em> 大图是小图的2倍尺寸 </em>/
background-repeat: no-repeat;
display: none; /<em> 默认隐藏 </em>/
}</p>

登录后复制

注意： background-size 设置为原图放大比例（如大图是小图的2倍，则设为2倍宽高），这样才能实现精细的局部放大。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

3. 交互逻辑（JavaScript）

通过 JS 监听鼠标移动事件，在小图上滑动时控制大图容器的背景位置：

const smallImg = document.querySelector('.small-img');
const largeImg = document.querySelector('.large-img');
<p>smallImg.addEventListener('mouseenter', () => {
largeImg.style.display = 'block';
});</p><p>smallImg.addEventListener('mouseleave', () => {
largeImg.style.display = 'none';
});</p><p>smallImg.addEventListener('mousemove', (e) => {
const { offsetX, offsetY } = e;</p><p>// 计算背景图应移动的位置（放大倍数决定）
const scaleX = 2;
const scaleY = 2;</p><p>largeImg.style.backgroundPosition = <code>-${offsetX * scaleX}px -${offsetY * scaleY}px</code>;
});</p>

登录后复制

说明：offsetX 和 offsetY 是鼠标相对于小图的坐标，乘以缩放比例后反向设置给 background-position，即可实现“跟随”效果。