放大镜放大镜：需求分析：切入点交互 1.鼠标移入小盒子small：显示大盒子big与遮罩层mask 2.鼠标移出小盒子

放大镜：需求分析：切入点交互 1.鼠标移入小盒子small：显示大盒子big与遮罩层mask 2.鼠标移出小盒子small：隐藏大盒子big与遮罩层mask 3.鼠标移动小盒子small： a.mask跟随鼠标移动 b.鼠标在mask中心 c.mask边界检测 d.大盒子的图片对应移动 * 假如mask是50px50px,大盒子是100px100px,鼠标每移动1px，大盒子图片移动2px * 100 / 50 * 1 = 2

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 350px;
      height: 350px;
      margin: 100px;
      border: 1px solid #ccc;
      position: relative;
    }

    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none;
    }

    .mask {
      width: 175px;
      height: 175px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0;
      left: 0;
      cursor: move;
      display: none;
    }

    .small {
      position: relative;
    }

    .box img {
      vertical-align: top;
    }

    #bigBox>img {
      /*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="small" id="smallBox">
      <img src="images/001.jpg" width="350" alt="" />

      <div class="mask" id="mask"></div>
    </div>
    <div class="big" id="bigBox">
      <img id="bigImg" src="images/0001.jpg" width="800" alt="" />
    </div>
  </div>
</body>
<script src="common.js"></script>
<script>
  /* 需求分析：切入点交互
      1.鼠标移入小盒子small：显示大盒子big与遮罩层mask
      2.鼠标移出小盒子small：隐藏大盒子big与遮罩层mask
      3.鼠标移动小盒子small：
          a.mask跟随鼠标移动
          b.鼠标在mask中心
          c.mask边界检测
          d.大盒子的图片对应移动
              * 假如mask是50px*50px,大盒子是100px*100px,鼠标每移动1px，大盒子图片移动2px
                * 100 / 50 * 1 = 2
      */


  // 获取元素
  let box = document.querySelector('.box')
  let smallBox = document.querySelector('#smallBox')
  let bigBox = document.querySelector('#bigBox')
  let mask = document.querySelector('.mask')
  let bigImg = document.querySelector('#bigImg')

  // 鼠标移入
  box.addEventListener('mouseenter', function () {
    // 鼠标移出 大盒子和mask显示
    bigBox.style.display = 'block'
    mask.style.display = 'block'
  })
  // 鼠标移出
  box.addEventListener('mouseleave', function () {
    // 鼠标移出 大盒子和mask隐藏
    bigBox.style.display = 'none'
    mask.style.display = 'none'
  })
  // 鼠标移动
  box.addEventListener('mousemove', function (e) {
    // 3.1 mask 跟随鼠标移动

    let x = e.pageX - box.offsetLeft - mask.offsetWidth / 2
    let y = e.pageY - box.offsetTop - mask.offsetHeight / 2
    // console.log(x, y);


    // 3.2 让mask只能在smallBox里面移动

    x = x < 0 ? 0 : x
    x = x > smallBox.offsetWidth - mask.offsetWidth ? smallBox.offsetWidth - mask.offsetWidth : x

    y = y < 0 ? 0 : y
    y = y > smallBox.offsetWidth - mask.offsetWidth ? smallBox.offsetWidth - mask.offsetWidth : y

    mask.style.left = x + 'px'
    mask.style.top = y + 'px'

    // 3.4 大盒子里面的图片 和mask一起移动
    bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px'
    bigImg.style.top = -y * bigBox.offsetWidth / mask.offsetWidth + 'px'


  })
</script>

</html>