Imitation Jingdong magnifying glass case

Objective function

Here Insert Picture Description
Code

<!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>
    .wrapper {
      position: relative;
      width: 398px;
      height: 398px;
      margin: 100px auto;
      border: 1px solid #cccccc;
      cursor: move;
    }

    .img {
      vertical-align: bottom;
    }

    .cover {
      display: none;
      position: absolute;
      width: 300px;
      height: 300px;
      opacity: .6;
      background-color: #feeea6;
    }

    .enlarge {
      display: none;
      position: absolute;
      top: 0;
      left: 410px;
      width: 500px;
      height: 500px;
      border: 1px solid #cccccc;
      overflow: hidden;
    }

    .enlarge img {
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <img src="./s3.png" alt="">
    <div class="cover"></div>
    <!-- 右侧的图片放大框 -->
    <div class="enlarge">
      <img src="./b3.png" alt="" class="enlarge-img">
    </div>
  </div>

  <script>
    var wrapper = document.querySelector('.wrapper');
    var cover = document.querySelector('.cover');
    var enlarge = document.querySelector('.enlarge');
    var enlargeImg = document.querySelector('.enlarge-img');

    // 显示和隐藏遮罩层与放大图
    wrapper.addEventListener('mouseenter', function () {
      cover.style.display = 'block';
      enlarge.style.display = 'block';
    });
    wrapper.addEventListener('mouseleave', function () {
      cover.style.display = 'none';
      enlarge.style.display = 'none';
    });

    // 遮罩层跟随鼠标移动
    wrapper.addEventListener('mousemove', function (e) {
      // 鼠标在盒子内的坐标
      var x = e.pageX - wrapper.offsetLeft;
      var y = e.pageY - wrapper.offsetTop;

      // 遮罩层的坐标，将其左、上移自身宽高的50%，使鼠标在遮罩层中居中
      var coverX = x - cover.offsetWidth / 2;
      var coverY = y - cover.offsetHeight / 2;

      // 遮罩层坐标的最大值
      var coverXMax = wrapper.offsetWidth - cover.offsetWidth;
      var coverYMax = wrapper.offsetHeight - cover.offsetHeight;

      // 避免遮罩层移出外部
      if (coverX < 0) {
        coverX = 0;
      } else if (coverX > coverXMax) {
        coverX = coverXMax;
      } else {
        coverX = coverX;
      }
      if (coverY < 0) {
        coverY = 0;
      } else if (coverY > coverYMax) {
        coverY = coverYMax;
      } else {
        coverY = coverY;
      }

      cover.style.left = coverX + 'px';
      cover.style.top = coverY + 'px';

      // 右侧放大框里的图片也跟随移动,但是移动方向相反
      // 移动的距离有个比值，遮罩层移动的距离/遮罩层最大移动距离=图片移动的距离/图片移动的最大距离

      // 图片移动的最大距离
      var enlargeImgXMax = enlargeImg.offsetWidth - enlarge.offsetWidth;
      var enlargeImgYMax = enlargeImg.offsetHeight - enlarge.offsetHeight;

      // 图片在放大框内的坐标
      var enlargeImgX = coverX / coverXMax * enlargeImgXMax;
      var enlargeImgY = coverY / coverYMax * enlargeImgYMax;

      enlargeImg.style.left = -enlargeImgX + 'px';
      enlargeImg.style.top = -enlargeImgY + 'px';
    });
  </script>
</body>

</html>
Suikoigia
Published 135 original articles · won praise 0 · Views 3088
Private letter concerns
Imitation Jingdong magnifying glass case

Objective function

Code

Guess you like
