初级JS--放大镜效果

LanM蓝莓

已于 2022-04-07 14:59:10 修改

阅读量102

点赞数

分类专栏： JS 文章标签： javascript 开发语言前端

于 2022-04-07 14:58:44 首次发布

本文链接：https://blog.csdn.net/blueskywang66/article/details/124016776

版权

JS 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

css部分：

 * {
        margin: 0;
        padding: 0;
      }
      #normal {
        width: 400px;
        height: 400px;
        position: relative;
        border: 1px red solid;
      }
      #small {
        background: red;
      }
      #small img {
        width: 400px;
        height: 400px;
      }
      .big {
        position: absolute;
        height: 400px;
        width: 400px;
        left: 450px;
        top: 0;
        overflow: hidden;
        display: none;
        border: 1px red solid;
      }
      .big-img {
        position: absolute;
        left: 0;
        top: 0;
      }
      .box {
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 0, 0.3);
        position: absolute;
        left: 0px;
        top: 0px;
        display: none;
      }

HTML部分：

  <div id="normal">
      <div id="small">
        <img src="../images/normal.jpg" alt="" />
        <div class="box"></div>
      </div>
      <div class="big">
        <img src="../images/big.jpg" alt="" class="big-img" />
      </div>
    </div>

JS部分：

const normal = document.querySelector("#normal");
      const box = document.querySelector(".box");
      const bigDiv = document.querySelector(".big");
      const bigImg = document.querySelector(".big-img");
      normal.onmouseenter = function () {
        box.style.display = "block";
        bigDiv.style.display = "block";

        let bigImgWidth =
          (bigDiv.offsetWidth * normal.offsetWidth) / box.offsetWidth;
      };
      normal.onmoouseleave = function () {
        box.style.display = "none";
        bigDiv.style.display = "none";
      };
      normal.onmousemove = function (evt) {
        let offsetX = evt.pageX - normal.offsetLeft;
        let offsetY = evt.pageY - normal.offsetTop;

        let boxX = offsetX - box.offsetWidth / 2;
        let boxY = offsetY - box.offsetHeight / 2;

        if (boxX <= 0) {
          boxX = 0;
        }
        if (boxY <= 0) {
          boxY = 0;
        }
        if (boxX >= normal.offsetWidth - box.offsetWidth) {
          boxX = normal.offsetWidth - box.offsetWidth;
        }
        if (boxY >= normal.offsetWidth - box.offsetWidth) {
          boxY = normal.offsetWidth - box.offsetWidth;
        }
        box.style.left = boxX + "px";
        box.style.top = boxY + "px";

        let bigImgX = (-boxX * bigImg.offsetWidth) / normal.offsetWidth;
        let bigImgY = (-boxY * bigImg.offsetHeight) / normal.offsetHeight;

        bigImg.style.left = bigImgX + "px";
        bigImg.style.top = bigImgY + "px";
      };