前端页面用原生JavaScript实现放大镜效果

最新推荐文章于 2024-07-12 21:49:18 发布

ZhongJian_csdn

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量943

点赞数 2

分类专栏： JavaScript CSS 文章标签： js 放大镜

本文链接：https://blog.csdn.net/JohnZhongJob/article/details/85267230

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

在逛购物网站时，经常会有我们移动到图片上时，图片旁边出现局部放大的图像。那么怎么实现这种放大镜的效果呢？这里给出两种方式，一种时原生js实现的，一种使用react来实现。

原生JavaScript实现代码：

point.png:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>magnifying glass</title>
  <style>
    #magnifying {
      display: block;
      width: 400px;
      height: 400px;
      margin: 50px;
      position: relative;
      border: 1px solid rgba(0,0,0,.05);
    }

    #origin {
      position: relative;
      z-index: 1;
    }

    #float {
      display: none;
      width: 160px;
      height: 160px;
      background: #ffffcc;
      border: 1px solid #ccc;
      /*兼容ie浏览器*/
      filter: alpha(opacity=30);
      opacity: 0.3;
      /*background: url("./point.png") scroll repeat 0 0;*/
      position: absolute;
      overflow: hidden;
    }

    #mark {
      position: absolute;
      display: block;
      width: 400px;
      height: 400px;
      z-index: 10;
      cursor: move;
    }

    #zoom {
      display: none;
      position: absolute;
      top: 0;
      left: 420px;
      width: 400px;
      height: 400px;
      overflow: hidden;
      z-index: 1;;
    }

    #zoom img {
      position: absolute;
      z-index: 5
    }
  </style>

</head>
<body>
<div id="magnifying">
  <div id="origin">
    <div id="mark"></div>
    <span id="float"></span>
    <img width="400px" src="./portrait.jpg"/>
  </div>
  <div id="zoom">
    <img src="./portrait.jpg"/>
  </div>
</div>
<script>
  window.onload = function () {
    const Magnifying = document.getElementById("magnifying");
    const Origin = document.getElementById("origin");
    const Mark = document.getElementById("mark");
    const Float = document.getElementById("float");
    const Zoom = document.getElementById("zoom");
    const ZoomImage = Zoom.getElementsByTagName("img")[0];

    Mark.onmouseover = function () {
      Float.style.display = "block";
      Zoom.style.display = "block";
    };

    Mark.onmouseout = function () {
      Float.style.display = "none";
      Zoom.style.display = "none";
    };

    Mark.onmousemove = function (ev) {

      const _event = ev || window.event;  //兼容多个浏览器的event参数模式

      let left = _event.clientX - Magnifying.offsetLeft - Origin.offsetLeft - Float.offsetWidth / 2;
      let top = _event.clientY - Magnifying.offsetTop - Origin.offsetTop - Float.offsetHeight / 2;

      //设置边界处理，防止移出小图片
      if (left < 0) {
        left = 0;
      } else if (left > (Mark.offsetWidth - Float.offsetWidth)) {
        left = Mark.offsetWidth - Float.offsetWidth;
      }

      if (top < 0) {
        top = 0;
      } else if (top > (Mark.offsetHeight - Float.offsetHeight)) {
        top = Mark.offsetHeight - Float.offsetHeight;

      }

      Float.style.left = left + "px";
      Float.style.top = top + "px";

      //求比值
      const percentX = left / (Mark.offsetWidth - Float.offsetWidth);
      const percentY = top / (Mark.offsetHeight - Float.offsetHeight);

      //方向相反，故而是负值
      ZoomImage.style.left = -percentX * (ZoomImage.offsetWidth - Zoom.offsetWidth) + "px";
      ZoomImage.style.top = -percentY * (ZoomImage.offsetHeight - Zoom.offsetHeight) + "px";
    }
  }
</script>
</body>
</html>