js原生放大镜

最新推荐文章于 2024-08-13 22:07:58 发布
Djdhfnfnnf
最新推荐文章于 2024-08-13 22:07:58 发布
阅读量97
点赞数
文章标签： javascript css css3
本文链接：https://blog.csdn.net/sosadtoday/article/details/128137247
版权
前置知识点
鼠标划入划出事件，鼠标移动事件
划入 onmouseover
划出 onmouseput
移动 onmousemove
获取元素左边距高度的offersettop offsetwidth
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .middleBox {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
      }

      .middleBox img {
        width: 400px;
        height: 400px;
      }

      .shade {
        width: 100px;
        height: 100px;
        background: yellow;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.5;
        display: none;
      }

      .smallBox {
        margin-top: 10px;
      }

      .smallBox img {
        border: 1px solid #000;
        margin-left: 5px;
        width: 50px;
        height: 50px;
      }

      .smallBox img.active {
        border-color: red;
      }

      .box {
        margin: 50px;
        width: 402px;
        position: relative;
      }

      .bigBox {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: absolute;
        top: 0;
        left: 105%;
        display: none;
        background-image: url(./images/big1.jpg);
        background-position: 0 0;
        background-size: 1600px 1600px;
        background-repeat: no-repeat;
      }

      .shade:hover {
        cursor: move;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="middleBox">
        <img src="./images/big1.jpg" width="400" height="400" />
        <div class="shade"></div>
      </div>
      <div class="smallBox">
        <img class="active" src="./images/big1.jpg" />
        <img src="./images/big2.jpg" alt="" />
      </div>
      <div class="bigBox"></div>
    </div>
  </body>
</html>
<script>
  /*
        实现思路
        1、需要给小图 绑定点击事件  一旦点击 将中图给换掉
        2、给中图绑定 鼠标划入、划出、移动事件
            在移动的过程中计算遮住位置 最后将大图 背景做定位
            // 整个的难点就是x表示的top的值。其次是offset表示的元素的magin加上父元素的margin等等。offwidht
            // 表示的是元素的高度。top值是根据父元素的值来看的。
    */
  // 1、获取常用的dom
  const boxDom = document.querySelector(".box");
  const middleBoxDom = document.querySelector(".middleBox");
  const smallBoxDom = document.querySelector(".smallBox");
  const bigBoxDom = document.querySelector(".bigBox");
  const shadeDom = document.querySelector(".shade");
  const middleImgDom = middleBoxDom.querySelector("img");
  //2、小图绑定点击事件
  smallBoxDom.addEventListener("click", (event) => {
    // tagName与nodeName属性一样 都是获取到标签名称
    if (event.target.tagName == "IMG") {
      // 说明点击的是小图
      // 将当前点击的小图 设置特殊的边框
      smallBoxDom.querySelector(".active").className = "";
      event.target.className = "active";
      // 将中图进行修改
      middleBoxDom.querySelector("img").src = event.target.src;
      // 更换大图的背景 注意背景图片 最好加上单引号 避免地址特殊符号导致错误
      bigBoxDom.style.backgroundImage = `url('${event.target.src}')`;
    }
  });

  // 中图设置鼠标滑入事件
  //   鼠标划入和鼠标移动在这里需要一起用。
  middleBoxDom.onmouseover = function () {
    // 将遮住显示
    shadeDom.style.display = "block";
    // 显示出大图
    bigBoxDom.style.display = "block";
    // 获取遮住的本身的宽高一半
    let shadeWdithHalf = shadeDom.clientWidth / 2;
    let shadeHeightHalf = shadeDom.clientHeight / 2;
    const middleWidth = middleBoxDom.offsetWidth;
    const shadeWidth = shadeDom.offsetWidth;
    const middleHeight = middleBoxDom.offsetHeight;
    const shadeHeight = shadeDom.offsetHeight;

    // 中图绑定鼠标移动事件
    middleBoxDom.onmousemove = function (event) {
      // offsetX offsetY 是以当前元素左上角计算坐标 在移动的过程中 每次都会移动遮罩的位置，导致每次取出的xy 是有可能是错误的
      // 为了保证坐标点事正确的 可以使用pageX pageY 经过运算得到
      //   let x = event.pageX;
      //   let y = event.pageY;
      // page表示到鼠标移动的距离
      // offsetLeft表示外边距的距离
      // 表示红色框宽度的一般
      let x = event.pageX - boxDom.offsetLeft - shadeWdithHalf;
      let y = event.pageY - boxDom.offsetTop - shadeHeightHalf;
      console.log(y);
      if (x < 0) {
        x = 0;
        // 表示top值小于0的时候。top为这个
      }
      //   console.log(middleWidth, shadeWidth);
      if (x > middleWidth - shadeWidth) {
        x = middleWidth - shadeWidth;
      }
      if (y < 0) {
        y = 0;
      }
      if (y > middleHeight - shadeHeight) {
        y = middleHeight - shadeHeight;
      }
      //   console.log(boxDom.offsetLeft);
      // 限制遮住的位置 不能超出整个容器
      //   if (x < boxDom.offsetLeft + shadeWdithHalf) {
      //     x = boxDom.offsetLeft + shadeWdithHalf;
      //   }
      //   if (x > boxDom.offsetLeft + middleBoxDom.clientWidth - shadeWdithHalf) {
      //     x = boxDom.offsetLeft + middleBoxDom.clientWidth - shadeWdithHalf;
      //   }
      //   if (y < boxDom.offsetTop + shadeHeightHalf) {
      //     y = boxDom.offsetTop + shadeHeightHalf;
      //   }
      //   if (y > boxDom.offsetTop + middleBoxDom.clientHeight - shadeHeightHalf) {
      //     y = boxDom.offsetTop + middleBoxDom.clientHeight - shadeHeightHalf;
      //   }
      // 取出整个盒子距离上面与左侧的距离
      // offsetLeft/offsetTop 表示获取上级定位元素的偏移量 因为以整个页面计算额坐标点 所以需要减掉 上面与左侧的距离才是相对 中图的坐标点
      shadeDom.style.left = x + "px";
      shadeDom.style.top = y + "px";

      //   偏移量,这里表示偏移的值,前面为分子，后边为分母
      let xPercentage = shadeDom.offsetLeft / middleImgDom.offsetWidth;
      let yPercentage = shadeDom.offsetTop / middleBoxDom.offsetHeight;
      // 获取这个的值
      let size = window.getComputedStyle(bigBoxDom).backgroundSize.split(" ");
      console.log(size);
      let xMove = parseInt(size[0]) * xPercentage;
      //   这里是取整操作。
      let yMove = parseInt(size[1]) * yPercentage;

      bigBoxDom.style.backgroundPosition = `-${xMove}px -${yMove}px`;
      // console.log(xPercentage);
      //   shadeDom.style.top = y - boxDom.offsetTop - shadeHeightHalf + "px";
    };
  };
  middleBoxDom.onmouseout = function () {
    middleBoxDom.onmousemove = null;
    // 将遮住显示
    shadeDom.style.display = "none";
    // 显示出大图
    bigBoxDom.style.display = "none";
  };
  //
</script>