当前位置：首页 > 行业动态 > 正文

html放大镜js

admin
行业动态
2025-04-29
4069

HTML放大镜JS通过捕获鼠标坐标，动态生成等比缩放区域，利用定位与遮罩

实现原理

HTML放大镜效果主要通过以下技术实现：

html放大镜js 第1张

鼠标事件监听：捕捉鼠标在目标区域（如图片）的移动
坐标计算：根据鼠标位置计算放大区域的偏移量
DOM操作：动态调整放大镜元素的显示位置和内容
CSS配合：使用定位、裁剪和缩放实现视觉效果

HTML结构

<div class="magnifier-container">
  <div class="original-image">
    <img src="product.jpg" alt="商品图片">
    <div class="magnifier-lens"></div>
  </div>
  <div class="magnified-view">
    <img src="product.jpg" alt="放大视图">
  </div>
</div>

CSS样式

选择器	关键属性	作用
.magnifier-container	position: relative; width: 400px	容器定位
.original-image	position: relative; overflow: hidden	原始图片区域
.magnifier-lens	position: absolute; width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 0 5px #aaa; background: rgba(255,255,255,0.3); pointer-events: none;	放大镜镜片样式
.magnified-view	position: absolute; top: 0; left: 420px; width: 200px; height: 200px; overflow: hidden;	放大显示区域定位
.magnified-view img	width: 800px; height: 800px; transform: translate(-200px, -200px)	大图定位基准

JavaScript实现

document.addEventListener('DOMContentLoaded', function() {
  const original = document.querySelector('.original-image img');
  const lens = document.querySelector('.magnifier-lens');
  const magnified = document.querySelector('.magnified-view img');
  const container = document.querySelector('.magnifier-container');
  // 获取图片尺寸
  const originalWidth = original.naturalWidth;
  const originalHeight = original.naturalHeight;
  // 计算缩放比例
  const scaleX = originalWidth / original.width;
  const scaleY = originalHeight / original.height;
  container.addEventListener('mousemove', function(e) {
    // 获取鼠标在图片中的坐标
    const rect = original.getBoundingClientRect();
    let x = e.clientX rect.left;
    let y = e.clientY rect.top;
    // 边界检查
    x = Math.max(0, Math.min(x, original.width));
    y = Math.max(0, Math.min(y, original.height));
    // 更新镜片位置
    lens.style.left = `${x lens.offsetWidth/2}px`;
    lens.style.top = `${y lens.offsetHeight/2}px`;
    // 更新放大图位置
    magnified.style.backgroundPosition = `-${x  scaleX}px -${y  scaleY}px`;
  });
  // 鼠标移出隐藏镜片
  container.addEventListener('mouseleave', function() {
    lens.style.display = 'none';
  });
  // 鼠标进入显示镜片
  container.addEventListener('mouseenter', function() {
    lens.style.display = 'block';
  });
});

性能优化建议

优化方案	说明
节流处理	使用`requestAnimationFrame`限制鼠标移动事件触发频率
惰性加载	初始状态隐藏放大镜，鼠标进入时初始化
图片预加载	提前加载放大图避免卡顿
CSS硬件加速	为放大区域添加`will-change: transform`