放大镜案例

需求分析：切入点交互

1.鼠标移入smallBox：显示mask 显示bigBox

2.鼠标移出smallbox：隐藏mask 隐藏bigBox

3.鼠标移动smallBox

(1)mask跟随鼠标移动

鼠标到small距离 = e.pageX(鼠标到页面距离) - box.offsetLeft(大盒子到页面距离)

(2)鼠标在mask中心

mask往左上角偏移宽高一半

(3)mask在small内部移动

0 < x < small宽度 - mask宽度

(4)bigImg跟随mask移动

mask如果往右移动，bigImg往左移动（反向）

mask如果移动1px 放大镜比例 = 大盒子宽高 / mask宽高

HTMl ：

 <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>

css：

<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>

javascript:

<script>
 
  //  获取元素
  const box = document.querySelector('#box') //父盒子
  const smallBox = document.querySelector('#smallBox') //小盒子
  const mask = document.querySelector('#mask') //遮罩层盒子
  const bigBox = document.querySelector('#bigBox') //大盒子
  const bigImg = document.querySelector('#bigImg') //大盒子里面的图片

  //  1 鼠标移入smallBox ：显示mask 显示bigBox
  smallBox.addEventListener('mouseenter', function () {
    mask.style.display = 'block'
    bigBox.style.display = 'block'
  })

  //  2 鼠标移入smallBox ：隐藏mask  隐藏bigBox
  smallBox.addEventListener('mouseleave', function () {
    mask.style.display = 'none'
    bigBox.style.display = 'none'
  })

  //  3 鼠标移动
  smallBox.addEventListener('mousemove', function (e) {
    //(1) mask跟随鼠标移动
    // 获取鼠标触发点 到页面左上角距离
    console.log(e.pageX,e.pageY)
    // 求鼠标点到smallBox左边的距离（蓝线）
    // 蓝线 = 红线（e.pageX）- 绿线（box.offsetLeft）
    let x = e.pageX - box.offsetLeft
    let y = e.pageY - box.offsetTop

    // (2)鼠标在mask中心 ； mask往左上边偏移宽高的一半
    x -= mask.offsetWidth/2
    y -= mask.offsetHeight/2
    // console.log(x,y)

    //(3)mask只能在smallBox内部移动
    /* 
    0 < x < smallBox宽度350-mask宽度175
    0 < y < smallBox高度350-mask高度175
    */
   x = x < 0 ? 0 : x
   x = x > 175 ? 175 : x
   y = y < 0 ? 0 : y
   y = y > 175 ? 175 : y

    // 设置mask的位置
    mask.style.left = x + 'px'
    mask.style.top = y + 'px'

    // (4)大图片跟随mask移动
    // 如果mask移动1px 则大图片应该 放大比例 = 大盒子宽高 / mask 宽高 
    bigImg.style.left = -x*bigBox.offsetWidth/mask.offsetWidth + 'px'
    bigImg.style.top = -y*bigBox.offsetWidth/mask.offsetWidth + 'px'


  })
</script>

案例常用单词

mouseenter	鼠标经过
mouseleave	鼠标离开
mousemove	鼠标移动
page X, pageY	页面左上角的距离
offsetWidth	获取元素的自身宽,包含元素自身设置的宽高、padding、border，获取出来的是数值,方便计算
offsetHeight	获取元素的自身高,包含元素自身设置的宽高、padding、border，获取出来的是数值,方便计算
offsetLeft	获取元素距离自己定位父级元素的左边距离
offsetTop	获取元素距离自己定位父级元素的上距离