js详细讲解放大镜效果的实现

实现放大镜的整体思路

1.当鼠标放在图片上的时候,出现蒙层。
2.出现蒙层，让鼠标在蒙层中心
3.限制蒙层移动的范围
4.放大镜移动

最终实现的效果

鼠标放上去的时候,出现一个蒙层。
蒙层的移动范围只能在图片里，不能超出范围。
移动蒙层时，右侧会出现图片的放大部分。
移除图片的范围，放大镜消失。

鼠标放上去时候出现蒙层

xml 复制代码

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .box{
    margin-left: 400px;
    margin-top: 150px;
    position: relative;
  }
  .small-box{
    position: absolute;
    /* 图片的大小 */
    height: 450px;
    width: 450px;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: 300px;
    height: 300px;
    z-index: 3;
    border: 1px solid #aaa;
    background: 50% top no-repeat #fede4f;
    opacity: .5;
    -moz-opacity: .5;
    -khtml-opacity: .5;
    filter: alpha(Opacity=50);
    cursor: move;
  }
  .big-box{
    position: relative;
    display: none;
    /* 右侧放大镜盒子的大小 */
    width: 500px;
    height: 500px;
    /* 盒子肯定比图片小，然后使用超出裁剪 */
    overflow: hidden;
    /* 定位右侧盒子的位置 */
    top: 0px;
    /* 留了一个单位的像素处来，好区别 */
    left:451px;
  }
  #bigImg{
    position: absolute;
  }
  .small-box:hover .mask{
    display: block;
  }
  .small-box:hover + .big-box{
    display: block;
  }
</style>

xml 复制代码

<body>
   <div id="box" class="box">
    <!-- 页面上看见的小图 -->
    <div id="smallBox" class="small-box">
      <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
        <div class="mask" id="mask"></div>
      </div>
    </div>
    <!-- 放大的图 -->
    <div class="big-box" id="bigBox">
      <img id="bigImg" src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
    </div>
   </div>
</body>

计算蒙层坐标的中心位置

ini 复制代码

1.我们首先要计算一个坐标点的位置。
获取蒙层坐标点的位置
let mask_x= e.pageX - box.offsetLeft
let mask_y= e.pageY - box.offsetTop
现在我们得到了坐标点的位置。


如何计算蒙层坐标的中心位置呢？
mask_x= mask_x-mask.offsetWidth/2
mask_y= mask_y-mask.offsetHeight/2
也就是将 mask_x 向左移动了mask元素宽度的一半。

特别说明：
offsetLeft 是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。
margin,定位,border也会影响offsetLeft的值。但是padding不会影响。

xml 复制代码

<body>
   <div id="box" class="box">
    <!-- 页面上看见的小图 -->
    <div id="smallBox" class="small-box">
      <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
      <div class="mask" id="mask"></div>
    </div>
    <!-- 放大的图 -->
    <div class="big-box" id="bigBox">
      <img src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
    </div>
   </div>
</body>

ini 复制代码

<script>
  let smallBox=document.getElementById('smallBox')
  let box=document.getElementById('box')
  let mask=document.getElementById('mask')

  smallBox.onmousemove =function(e){
    // 获取蒙层坐标点的位置
    let mask_x= e.pageX - box.offsetLeft
    let mask_y= e.pageY - box.offsetTop
    // 计算蒙层坐标点的中心位置
    mask_x-= mask.offsetWidth/2
    mask_y-= mask.offsetHeight/2 
    mask.style.left = mask_x+'px'
    mask.style.top = mask_y+'px'
  }
</script>

限制移动的范围

在移动蒙层的的时候，是有范围限制的。
X轴最大的范围是： smallBox.offsetWidth-mask.offsetWidth，最小范围是0；
Y轴的最大范围是： smallBox.offsetHeight-mask.offsetHeight，最小范围是0；

ini 复制代码

<script>
  let smallBox=document.getElementById('smallBox')
  let box=document.getElementById('box')
  let mask=document.getElementById('mask')

  smallBox.onmousemove =function(e){
    // 获取蒙层坐标点的位置
    let mask_x= e.pageX - box.offsetLeft
    let mask_y= e.pageY - box.offsetTop
    // 计算蒙层坐标点的中心位置
    mask_x-= mask.offsetWidth/2
    // mask_x-= mask.offsetWidth - mask_x /2
    mask_y-= mask.offsetHeight/2 


    // 获取X可以移动的最大值
    let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
    // 获取y可以移动的最大值
    let moveMaxY= smallBox.offsetHeight-mask.offsetHeight

    // X轴最小值和最大值
    if(mask_x<0){
      mask_x=0
    }
    if(mask_x>moveMaxX){
      mask_x=moveMaxX
    }
    // Y轴最小值和最大值
    if(mask_y<0){
      mask_y=0
    }
    if(mask_y>moveMaxY){
      mask_y=moveMaxY
    }
    
    mask.style.left = mask_x+'px'
    mask.style.top = mask_y+'px'
  }
</script>

大图的移动

ini 复制代码

当我们的蒙层向右移动的时候，
我们的大图实际上是向左移动的。
移动的公式：
bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'

ini 复制代码

<script>
let smallBox=document.getElementById('smallBox')
let box=document.getElementById('box')
let mask=document.getElementById('mask')
let bigBox = document.getElementById('bigBox')

smallBox.onmousemove =function(e){
  // 获取蒙层坐标点的位置
  let mask_x= e.pageX - box.offsetLeft
  let mask_y= e.pageY - box.offsetTop
  // 计算蒙层坐标点的中心位置
  mask_x-= mask.offsetWidth/2
  mask_y-= mask.offsetHeight/2

  // 获取X可以移动的最大值
  let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
  // 获取y可以移动的最大值
  let moveMaxY= smallBox.offsetHeight-mask.offsetHeight

  // X轴最小值和最大值
  if(mask_x<0){
    mask_x=0
  }
  if(mask_x>moveMaxX){
    mask_x=moveMaxX
  }
  // Y轴最小值和最大值
  if(mask_y<0){
    mask_y=0
  }
  if(mask_y>moveMaxY){
    mask_y=moveMaxY
  }
  
  mask.style.left = mask_x+'px'
  mask.style.top = mask_y+'px'

  // 右侧的放大图
  bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
  bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
}
</script>