手牵手，原生JS放大镜特效，一步步带你实现

2023-11-05 11:40:52

放大镜特效：提升用户体验的实用工具

使用原生 JavaScript 实现放大镜特效

当你在浏览网上商品时，你一定遇到过放大镜功能。这个小工具允许你放大商品的细节，以便在购买前进行仔细检查。在本文中，我们将深入探讨如何使用原生 JavaScript 实现放大镜特效，让你为自己的项目增添这一实用功能。

搭建基本布局

第一步是设置基本布局。你需要两个容器：一个较小的容器（small）和一个较大的容器（big）。在每个容器中，放置相应大小的图片。此外，在较小的容器中，需要放置一个可以移动的遮罩层。下面是 HTML 代码：

<div class="small-container">
  <img id="small-image" src="small-image.jpg">
  <div class="mask"></div>
</div>

<div class="big-container">
  <img id="big-image" src="big-image.jpg">
</div>

移动遮罩层

当用户在较小的容器上移动鼠标时，遮罩层需要随之移动。为了实现这一点，你需要使用 mousemove 事件监听器，它会在鼠标移动时触发一个函数。该函数将计算遮罩层的移动位置，确保它保持在较小的容器内。以下是 JavaScript 代码：

// 获取 small 容器和遮罩层
const smallContainer = document.querySelector('.small-container');
const mask = document.querySelector('.mask');

// 监听鼠标移动事件
smallContainer.addEventListener('mousemove', (e) => {
  // 计算遮罩层的移动位置
  const x = e.clientX - smallContainer.offsetLeft;
  const y = e.clientY - smallContainer.offsetTop;

  // 限制遮罩层移动范围
  mask.style.left = Math.min(Math.max(x - mask.offsetWidth / 2, 0), smallContainer.offsetWidth - mask.offsetWidth) + 'px';
  mask.style.top = Math.min(Math.max(y - mask.offsetHeight / 2, 0), smallContainer.offsetHeight - mask.offsetHeight) + 'px';
});

放大图像

当遮罩层移动时，你需要放大较大的容器中的图像。为此，你可以计算遮罩层的相对位置（相对于较小容器），然后将其应用于较大容器中的图像位置。以下是 JavaScript 代码：

// 计算 big 容器中图像的放大比例
const scale = bigContainer.offsetWidth / smallContainer.offsetWidth;

// 监听鼠标移动事件
smallContainer.addEventListener('mousemove', (e) => {
  // 计算遮罩层的相对位置
  const relativeX = (e.clientX - smallContainer.offsetLeft) / smallContainer.offsetWidth;
  const relativeY = (e.clientY - smallContainer.offsetTop) / smallContainer.offsetHeight;

  // 更新 big 容器中图像的位置
  bigImage.style.left = -relativeX * (bigContainer.offsetWidth - bigImage.offsetWidth) + 'px';
  bigImage.style.top = -relativeY * (bigContainer.offsetHeight - bigImage.offsetHeight) + 'px';
});