鼠标移动图片放大效果

1 分析介绍

鼠标放大效果，是有两张图片，一张大图，一张小图组成的。当在小图片上移动的时候，大图片会在相应的位置(比例)显示出来
首先先实现：小图片上面有一个蒙层区域，会随着鼠标在小图片内的移动，而相应的在小图片的范围内移动；然后再实现在小图片内移动，大图片也相应地按一定的比例移动。下面看一下代码是如何实现的

CSS部分：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 1000px;
      margin: auto;
    }
    .left{
      width: 418px;
      height: 418px;
      border: 1px solid #999;
      margin-right: 20px;
      float: left;
      position: relative;
    }
    .left>img{
      width: 100%;
    }
    .mask{
      width: 145px;
      height: 145px;
      /* border: 1px dashed #999;
      background: rgba(0,0,0,0.3); */
      position: absolute;
      cursor: move;
      display: none;/*让蒙层刚开始不显示 鼠标触摸小图后显示*/
      background: url("mc.png") repeat;/*给蒙层设置一个背景图片*/
      left: 0;
      top: 0;
    }
    .right{
      width: 418px;
      height: 418px;
      border: 1px solid #999;
      float: left;
      display: none;/*让右边大图片刚开始不显示 鼠标触摸小图后显示*/
      overflow: hidden;/*让里面的图片溢出隐藏*/
      position: relative;
    }
    .right>img{
      position: absolute;
    }

  </style>
  

 <div class="box">
    //左边小图部分
    <div class="left">
      <img src="smallimg.jpg" alt="">
      <div class="mask"></div>//蒙层
    </div>
    //右边大图部分
    <div class="right">
      <img class="bigImg" src="bigimg.jpg" alt="">
    </div>
  </div>
  

JS部分：

<script>
    var left=document.querySelector(".left");
    var right=document.querySelector(".right");
    var mask=document.querySelector(".mask");

    left.addEventListener("mousemove",function(){
      mask.style.display="block";//鼠标触摸的时候，蒙层显示
      right.style.display="block";//鼠标触摸的时候，右边大图显示
    })
    left.addEventListener("mouseleave",function(){
      mask.style.display="none";//鼠标离开的时候，蒙层不显示
      right.style.display="none";//鼠标离开的时候，右边大图不显示
    })




      left.addEventListener("mousemove",function(e){
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var maskx = x - mask.offsetWidth/2;     //始终在蒙层的中心位置
      var masky = y - mask.offsetHeight/2;
      var maskMax=this.offsetWidth-mask.offsetWidth;   //蒙层能够移动的最大宽度
      var maskMaxY=this.offsetHeight-mask.offsetHeight;//能够移动的最大高度
      // 蒙层不是随便移动的，是有一定范围值的
      if(maskx<=0){
     maskx=0; //蒙层移动到图片的左边，将其设置为最小为0，即不能再往左边移动了
      }else if(maskx>=maskMax){
      //蒙层移动到图片的右边，将其设置为最小为蒙层移动的最大值，即不能再往右边移动了
        maskx=maskMax;
      }

      if(masky<=0){
        masky=0;
      }else if(masky>=maskMaxY){
        masky=maskMaxY;
      }


      mask.style.left = maskx +"px";
      mask.style.top = masky + "px";



   // 让大图片进行移动，随着鼠标的移动而移动
  // 蒙层能够移动的最大位置 图片能够移动的最大位置 蒙层的移动位置 图片的移动位置
  // 这四个值 他们是成比例的
  // 即 蒙层能够移动的最大位置/蒙层的移动位置=图片能够移动的最大位置/图片的移动位置
    // 所以：
    // 大图片的移动位置=蒙层移动位置*大图片最大移动位置/蒙层最大移动位置

      var bigImg = document.querySelector(".bigImg");
      // 图片的水平最大移动距离；bigImgXMax;
      var bigImgXMax = bigImg.offsetWidth - right.offsetWidth;
      var bigImgYMax = bigImg.offsetHeight - right.offsetHeight;
      bigImgX = maskx*bigImgXMax/maskMax;
      bigImgY = masky*bigImgXMax/maskMaxY;
      bigImg.style.left=-bigImgX+"px";//因为是向左和向上移动 所以用的是负数
      bigImg.style.top=-bigImgY+"px";
      

    })

  </script>