原生js放大镜效果代码

原生JavaScript放大镜效果是一种常见的网页交互效果，它允许用户通过鼠标悬停在图片上时，显示一个放大的视图。以下是实现这一效果的基础概念、优势、类型、应用场景以及示例代码。

基础概念

放大镜效果通常涉及以下几个关键点：

遮罩层（Mask）：用于显示放大后的图像区域。
放大镜容器（Magnifier Container）：包含放大后的图像。
鼠标跟踪：实时跟踪鼠标在原始图像上的位置，并相应地更新放大镜中的视图。

优势

增强用户体验：提供更直观的图像查看方式。
无需额外插件：完全依赖原生JavaScript和CSS实现。
灵活性高：可以根据需求自定义放大倍数、遮罩形状等。

类型

圆形遮罩：放大镜区域为圆形。
矩形遮罩：放大镜区域为矩形。
自定义形状遮罩：可以使用CSS创建任意形状的遮罩。

应用场景

电商网站：展示商品细节。
图片库：方便用户查看高清图片。
艺术作品展示：提供更精细的艺术品细节。

示例代码

以下是一个简单的原生JavaScript放大镜效果实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magnifier Effect</title>
<style>
  .magnifier-container {
    position: relative;
    display: inline-block;
  }
  .magnifier-lens {
    position: absolute;
    border: 2px solid #000;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: none;
  }
  .magnifier-result {
    position: absolute;
    top: 0;
    right: -120px; /* Adjust as needed */
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    display: none;
  }
  .magnifier-result img {
    position: absolute;
    width: auto;
    height: auto;
  }
</style>
</head>
<body>

<div class="magnifier-container">
  <img src="your-image.jpg" alt="Image" id="magnifier-image">
  <div class="magnifier-lens" id="magnifier-lens"></div>
  <div class="magnifier-result" id="magnifier-result">
    <img src="your-image.jpg" alt="Magnified Image" id="magnifier-result-img">
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const image = document.getElementById('magnifier-image');
    const lens = document.getElementById('magnifier-lens');
    const result = document.getElementById('magnifier-result');
    const resultImg = document.getElementById('magnifier-result-img');

    const cx = result.offsetWidth / lens.offsetWidth;
    const cy = result.offsetHeight / lens.offsetHeight;

    image.addEventListener('mousemove', moveLens);
    lens.addEventListener('mousemove', moveLens);

    function moveLens(e) {
      e.preventDefault();
      const pos = getCursorPos(e);
      let x = pos.x - (lens.offsetWidth / 2);
      let y = pos.y - (lens.offsetHeight / 2);

      if (x > image.width - lens.offsetWidth) { x = image.width - lens.offsetWidth; }
      if (x < 0) { x = 0; }
      if (y > image.height - lens.offsetHeight) { y = image.height - lens.offsetHeight; }
      if (y < 0) { y = 0; }

      lens.style.left = x + 'px';
      lens.style.top = y + 'px';
      resultImg.style.left = -x * cx + 'px';
      resultImg.style.top = -y * cy + 'px';
    }

    function getCursorPos(e) {
      let a, x = 0, y = 0;
      e = e || window.event;
      a = image.getBoundingClientRect();
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return {x: x, y: y};
    }

    image.addEventListener('mouseenter', () => {
      lens.style.display = 'block';
      result.style.display = 'block';
    });

    image.addEventListener('mouseleave', () => {
      lens.style.display = 'none';
      result.style.display = 'none';
    });
  });
</script>

</body>
</html>

解释

HTML结构：包含原始图像、遮罩层和放大结果显示区域。
CSS样式：定义了各个元素的布局和外观。
JavaScript逻辑：
- 监听鼠标移动事件，计算并更新遮罩层和放大镜中的图像位置。
- 使用getCursorPos函数获取鼠标在图像上的精确位置。
- 根据鼠标位置调整放大镜和放大结果显示区域的位置。

通过这种方式，可以实现一个简单而有效的放大镜效果，提升用户的交互体验。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

原生js放大镜效果代码

基础概念

优势

类型

应用场景

示例代码

解释

相关·内容

53.尚硅谷_jQuery_应用_放大镜效果1.avi

54.尚硅谷_jQuery_应用_放大镜效果2.avi

09-尚硅谷-尚优选PC端项目-放大镜鼠标移入移出效果

13-尚硅谷-尚优选PC端项目-放大镜缩略图布局搭建效果

10-尚硅谷-尚优选PC端项目-放大镜鼠标移动实现蒙版元素的拖拽效果

12-尚硅谷-尚优选PC端项目-放大镜移动实现大图元素等比例移动效果

139.尚硅谷_JS基础_二级菜单-过渡效果

27.尚硅谷_JS基础_代码块

在线JavaScript加密，提交JS代码、上传Zip文件

JS代码压缩，减小体积、优化逻辑、提升效率

04-jQuery/10-尚硅谷-jQuery-原生js和jQuery页面加载完成之后的区别

JavaScript教程-25-JS代码的执行顺序【动力节点】

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐