js原生pink老师仿京东放大镜

<style>

    * {

      padding: 0;

      margin: 0;

    }



    li {

      list-style: none;

      width: 50px;

      height: 50px;

    }



    .active {

      border: 1px solid red;

    }



    .box {

      overflow: hidden;

    }



    .leftBox {

      position: relative;

      float: left;

      margin-left: 50px;

      width: 400px;

      height: 480px;

      border: 1px solid pink;

    }



    .moveBox {

      width: 400px;

      height: 400px;

    }



    .mask {

      position: absolute;

      width: 200px;

      height: 200px;

      background-color: rgba(155, 196, 219, 0.3);

      display: none;

    }



    .moveBox img {

      width: 100%;

      height: 100%;

    }



    #imgs {

      height: 100px;

      display: flex;

      justify-content: space-around;

      align-items: center;

    }



    #imgs img {

      width: 50px;

      height: 50px;



    }



    /* 右边 */

    .rightBox {

      width: 800px;

      height: 800px;

      float: left;

      overflow: hidden;

      display: none;

      margin-left: 10px;

      background: url(./1.jpg) no-repeat;

      background-size: 800px 800px;

    }

  </style>

<div class="box">

    <!-- 左边 -->

    <div class="leftBox">

      <!-- 眼睛 -->

      <div class="mask"></div>

      <div class="moveBox">

        <img src="./1.jpg" alt="" class="leftImg">

      </div>

      <ul id="imgs">




        <li class="active"> <img src="./1.jpg" alt=""></li>

        <li> <img src="./2.jpg" alt=""></li>

        <li> <img src="./3.jpg" alt=""></li>

        <li> <img src="./4.jpg" alt=""></li>

        <li> <img src="./5.jpg" alt=""></li>

        <li> <img src="./6.jpg" alt=""></li>

      </ul>

    </div>

    <!-- 右边 -->

    <div class="rightBox">



    </div>

  </div>

<script>

  //1.点击对应小图片 换中等和大图片src

  const ul = document.querySelector('ul');

  const moveBox = document.querySelector('.moveBox');

  const rightBox = document.querySelector('.rightBox');

  ul.addEventListener('mouseover', function (e) {

    if (e.target.tagName === 'IMG') {

      document.querySelector('.active').classList.remove('active');

      e.target.parentNode.classList.add('active');

      moveBox.querySelector('img').src = e.target.src;

      rightBox.style.background = `url(${e.target.src}) no-repeat`;

    }

  })

  //2.鼠标放在中等图片上显示右边大图

  moveBox.addEventListener('mouseenter', show);

  moveBox.addEventListener('mouseleave', hide);

  let time = 0;

  function show() {

    clearTimeout(time);

    rightBox.style.display = 'block';

    document.body.style.cursor = "crosshair";

  }

  function hide() {

    time = setTimeout(function () {

      document.body.style.cursor = "default";

      rightBox.style.display = 'none';

    }, 200)

  }

  //3.大图片的显示隐藏

  rightBox.addEventListener('mouseenter', show);

  rightBox.addEventListener('mouseleave', hide);

  //4.鼠标划到中等图片上显示遮罩层

  const mask = document.querySelector('.mask');

  moveBox.addEventListener('mouseenter', function () {

    mask.style.display = 'block';

  });

  moveBox.addEventListener('mouseleave', function () {

    mask.style.display = 'none';

  });

  //遮罩层移动

  moveBox.addEventListener('mousemove', function (e) {



    let x = (e.pageX) - parseInt((moveBox.getBoundingClientRect().left)), y = (e.pageY) - parseInt((moveBox.getBoundingClientRect().top));



    if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {

      let mx = 0, my = 0;

      if (x < 100) mx = 0;

      if (x >= 100 && x <= 300) mx = x - 100;

      if (x > 300) mx = 200;

      if (y < 100) my = 0;

      if (y >= 100 && y <= 300) my = y - 100;

      if (y > 300) my = 200;

      mask.style.left = mx + 'px';

      mask.style.top = my + 'px';

      rightBox.style.backgroundPositionX = -2 * mx + 'px';

      rightBox.style.backgroundPositionY = -2 * my + 'px'



    }

  })

</script>