js-09-放大镜效果_放大镜效果(手机)javascript课程第九章案例-CSDN博客

本文链接：https://blog.csdn.net/m0_64150479/article/details/137181858

效果

可以进行图片切换
图片有放大镜效果，且可以随着鼠标移动可以看到图片的不同部位
鼠标移动到放大图上图片不会消失

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>

<body>
 
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 面包屑 -->
      <div class="xtx-bread">
        <a href="javascript:;"> 首页 > </a>
        <a href="javascript:;"> 电子产品 > </a>
        <a href="javascript:;"> 电视 > </a>
        <span>小米电视4A 32英寸</span>
      </div>
      <!-- 商品信息 -->
      <div class="xtx-product-info">
        <div class="left">
          <div class="pictrue">
            <div class="middle">
              <img src="./images/1.jpg" alt="">
              <div class="layer"></div>
            </div>
            <div class="small">
              <ul>
                <li class="active"><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/3.jpg" alt=""></li>
                <li><img src="./images/4.jpg" alt=""></li>
                <li><img src="./images/5.jpg" alt=""></li>
              </ul>
            </div>
            <div class="large"></div>
          </div>
          
        </div>
        
      </div>
      
    </div>
  </div>


  <script>

    // 1.获取3个盒子
    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')

    // 2.鼠标经过小盒子  显示对应的中等盒子的图片，同时更新大盒子里对应的图片
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {
        this.querySelector('.active').classList.toggle('active')
        e.target.parentNode.classList.toggle('active')

        middle.querySelector('img').src = e.target.src
        // 大盒子添加背景图片，背景图的大小为中等盒子图片大小的2倍
        large.style.backgroundImage = `url(${e.target.src})`
      }
    })


    // 3.鼠标经过中等盒子   显示对应的大盒子
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)
    let timerId = null

    function show() {
      // 先检查有没有定时器，有的话先关闭定时器（下方的定时器有延迟，有可能还没过两秒，大盒子还没来得及隐藏，鼠标就又进入中等盒子，要立即显示大盒子）
      clearInterval(timerId)
      large.style.display = 'block'
    }

    function hide() {
      timerId = setTimeout(function () {
        large.style.display = 'none'
      }, 200)
    }

    // 3.鼠标经过大盒子   显示对应的大盒子
    large.addEventListener('mouseenter', show)
    large.addEventListener('mouseleave', hide)


    // 4.鼠标经过中等盒子，显示对应的黑色遮罩层
    const layer = document.querySelector('.layer')
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })

    // 5.得到鼠标在中等盒子里的坐标（无法直接得到，需要间接计算）
    middle.addEventListener('mousemove', function (e) {
      // 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
      //e.pageY:获取的是相对于页面左上角的垂直移动距离，而不是相对于屏幕的垂直移动距离
      // console.log(middle.getBoundingClientRect().left)
      let x = e.pageX - middle.getBoundingClientRect().left
      let y = e.pageY - document.documentElement.scrollTop - middle.getBoundingClientRect().top

      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        // layer.style.top = y + 'px'

        // 黑色盒子不是一直移动的
        // 声明两个变量  黑色盒子移动的mx my变量
        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
        layer.style.left = mx + 'px'
        layer.style.top = my + 'px'

        // 中盒子鼠标移动，大盒子图片跟随变化
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'


      }

    })
  </script>
</body>

</html>