原生js实现放大镜效果

kazemiyuika

于 2024-06-05 19:29:06 发布

阅读量187

点赞数 2

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/kazemiyuika/article/details/139480371

版权

第一次发文，项目中需求放大镜效果，使用react实现后，又用了原生实现了一遍

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .large {
        width: 378px;
        height: 378px;
        position: relative;
        border: 1px solid #000;
        margin: 30rem 15rem;
      }
      .layer {
        position: absolute;
        width: 50%;
        height: 50%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
      }
      .large img {
        width: 100%;
        object-fit: cover;
        height: 100%;
      }
      .show_middle{
        position: absolute;
        width: 400px;
        height: 400px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
        background-repeat: no-repeat;
        background-size: 800px 800px;
        left: 120%;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div class="large">
      <img src="japanese-cherry-blossom-2168858_640.jpg" alt="" />
      <div class="layer"></div>
      <div class="show_middle"></div>
    </div>

    <script>
      const large = document.querySelector(".large");
      const layer = document.querySelector(".layer");
      const m = document.querySelector('.show_middle')
      const img = document.querySelector('img')

      large.addEventListener("mouseenter", () => {
        layer.style.display = "block";
        m.style.display = "block";
        m.style.backgroundImage  = `url(${img.src})`;
      });
      large.addEventListener("mouseleave", () => {
        layer.style.display = "none";
        m.style.display = "none";
      });

      large.addEventListener("mousemove", (e) => {
        // 获取图片盒子的宽高
        const w = large.offsetWidth;
        const h = large.offsetHeight;

        const rect = large.getBoundingClientRect();
        // 获取元素离页面的左侧距离
        const x = rect.left;
        // Y轴距离
        const y = rect.top;
        let moveLeft = e.clientX - x;
        let moveTop = e.clientY - y;

        // 实际移动距离
        let positionLeft;
        let positionTop;

        // 移动临界值
        const minMove = large.offsetWidth * 0.25;
        // X轴移动距离
        if (moveLeft < minMove) {
            positionLeft = 0;
        }
        else if (moveLeft > w * 0.75) {
            positionLeft = w * 0.5;
        }
        else{
            positionLeft = moveLeft - minMove;
        }
        // Y轴移动距离
        if(moveTop < minMove){
            positionTop = 0;
        }
        else if(moveTop > h * 0.75) {
            positionTop = h * 0.5;
        }
        else{
            positionTop = moveTop - minMove;
        }

        layer.style.left = positionLeft + "px";
        layer.style.top = positionTop + "px";
        m.style.backgroundPosition = `-${positionLeft * 2}px -${positionTop * 2}px`;
      });
    </script>
  </body>
</html>