js脚本如何实现图片放大镜效果_js放大镜效果脚本编写与展示-js教程-PHP中文网

js脚本如何实现图片放大镜效果_js放大镜效果脚本编写与展示

雪夜

发布： 2025-11-14 05:53:22

原创

134人浏览过

答案：通过HTML结构搭建缩略图与放大区域，CSS定位设置样式，JavaScript监听鼠标事件实现坐标映射，使放大镜跟随鼠标并同步显示大图对应区域，完成图片放大镜效果。

js脚本如何实现图片放大镜效果_js放大镜效果脚本编写与展示

要实现图片放大镜效果，JavaScript 结合 HTML 和 CSS 就能轻松完成。核心思路是：通过监听鼠标在原图上的移动，在旁边或上方显示一个放大的区域，对应显示原图中鼠标所在位置的细节。下面一步步讲解如何编写并展示一个实用的 JS 放大镜效果。

1. 基本结构：HTML 布局

需要两个主要元素：一个是原图容器，另一个是放大镜显示区域（即放大后的图像）。

<div class="magnifier">
  <img id="small-img" src="small.jpg" alt="小图">
  <div class="loupe" id="loupe"></div>
</div>
<div class="big-img-container">
  <img id="big-img" src="big.jpg" alt="大图">
</div>

登录后复制

说明：small-img 是用户看到的缩略图，big-img 是高清大图（通常隐藏），loupe 是鼠标悬停时出现的高亮选区。

2. 样式设计：CSS 控制外观

使用 CSS 定位和裁剪，让放大镜看起来自然。

.magnifier {
  position: relative;
  display: inline-block;
}
#small-img {
  width: 400px;
  height: 300px;
}
.loupe {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  cursor: none;
  pointer-events: none; /* 不影响鼠标事件穿透 */
  display: none;
}
.big-img-container {
  overflow: hidden;
  width: 400px;
  height: 300px;
  margin-top: 10px;
  border: 1px solid #ddd;
  display: none; /* 初始隐藏，可改为 flex 显示 */
}
#big-img {
  width: 800px;
  height: 600px;
  position: relative;
}

登录后复制

注意：大图尺寸通常是原图的 2 倍，用于放大显示。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

3. 核心逻辑：JavaScript 实现交互

通过监听 mouseenter、mousemove 和 mouseleave 事件控制放大行为。

document.addEventListener('DOMContentLoaded', function () {
  const smallImg = document.getElementById('small-img');
  const loupe = document.getElementById('loupe');
  const bigImg = document.getElementById('big-img');
  const bigContainer = document.querySelector('.big-img-container');
<p>// 放大倍数
const zoom = 2;</p><p>smallImg.addEventListener('mouseenter', function (e) {
loupe.style.display = 'block';
bigContainer.style.display = 'block';
});</p><p>smallImg.addEventListener('mouseleave', function () {
loupe.style.display = 'none';
bigContainer.style.display = 'none';
});</p><p>smallImg.addEventListener('mousemove', function (e) {
const { left, top, width, height } = smallImg.getBoundingClientRect();
const x = e.clientX - left;
const y = e.clientY - top;</p><pre class='brush:php;toolbar:false;'>// 控制loupe不超出图片边界
const loupeWidth = loupe.offsetWidth / 2;
const loupeX = Math.max(0, Math.min(x - loupeWidth, width - loupe.offsetWidth));
const loupeY = Math.max(0, Math.min(y - loupeWidth, height - loupe.offsetHeight));

loupe.style.left = loupeX + 'px';
loupe.style.top = loupeY + 'px';

// 大图显示对应区域
const bgX = -loupeX * zoom;
const bgY = -loupeY * zoom;
bigImg.style.transform = `scale(${zoom})`;
bigImg.style.transformOrigin = '0 0';
bigImg.style.left = `${-bgX / zoom}px`;
bigImg.style.top = `${-bgY / zoom}px`;
bigContainer.style.overflow = 'hidden';

登录后复制

}); });

关键点：