javaScript实现放大镜效果（重要案例：详细代码和注释）

<style>
        *{
            margin:0px;
            padding: 0px;
        }
        .leftBox{
            width: 400px;
            height: 400px;
            margin:20px 0px 0px 30px;
            position: relative;
        }
        .leftBox img{
            width: 100%;
            height: 100%;
        }
        .mark{
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,0.3);
            position: absolute;
            top:0px;
            left: 0px;
            display: none;
        }
        .rightBox{
            /* 原生图片的大小宽高是800px 800px，这里右边盒子的宽高设为400px 400px，就可以实现显示图片的1/4 */
            width: 400px;
            height: 400px;
            position: absolute;
            top:20px;
            /* 左边的边框宽度是400px，不能盖住左边的框，所以移动450px */
            left: 450px;
            /* 把图片溢出右边盒子的部分给隐藏 */
            overflow: hidden;
            display: none;
        }
        .rightBox img{
            position: absolute;
        }
    </style>

<div class="leftBox">
        <!-- 图片 -->
        <img src="./imgs/1.jpg">
        <!-- 遮罩层 -->
        <div class="mark"></div>
    </div>

    <div class="rightBox">
        <!-- 区域放大后的图片 -->
        <img src="./imgs/1.jpg">
    </div>

<script>
        /* 
        思路;
            1、制作页面效果
            2、确定事件类型：onmouseover、onmouseout、onmousemove
            3、明确如何计算遮藏层移动距离=光标相对于页面的距离-大盒子相对于页面的距离
            4、遮藏层移动端额方向跟右边大盒子中图片的移动方向相反
        */
       //获取操作对象
       var leftBox=document.querySelector(".leftBox")
       var mark=document.querySelector(".mark")
       var rightBox=document.querySelector(".rightBox")

       //给左边大盒子对象绑定事件
       leftBox.onmouseover=function(){
           //显示隐藏的盒子
           mark.style.display='block'
           rightBox.style.display='block'
       }

       leftBox.onmouseout=function(){
           //隐藏指定盒子
           mark.style.display='none'
           rightBox.style.display='none'
       }
       leftBox.onmousemove=function(e){
           //兼容事件对象
           var e = e || window.event
           //获取移动距离
           //光标距离页面左边的距离-左盒子距离页面左边的距离-蒙版宽度的一半
           var left1=e.clientX-leftBox.offsetLeft-parseInt(mark.offsetWidth/2)
           var top1=e.clientY-leftBox.offsetTop-parseInt(mark.offsetHeight/2)
           //设置边界条件
           //用大盒子（左边盒子）的宽度-小盒子（即遮罩层）的宽度
           var maxX=leftBox.offsetWidth-mark.offsetWidth
           var maxY=leftBox.offsetHeight-mark.offsetHeight
           //右边图片移动的距离
           var imgLeft,imgTop

           //水平方向的判断
           //此时遮罩层在左盒子的最左边
           if(left1<=0){
               mark.style.left="0px"
               imgLeft=0
            //此时遮罩层在左盒子的最右侧
           }else if(left1>=maxX){
               mark.style.left=maxX+'px'
               imgLeft=maxX
           }else{
               mark.style.left=left1+'px'
               imgLeft=left1
           }

           //垂直方向
           if(top1<=0){
               mark.style.top="0px"
               imgTop=0
           }else if(top1>=maxY){
               mark.style.top=maxY+'px'
               imgTop=maxY
           }else{
               mark.style.top=top1+'px'
               imgTop=top1
           }

           //获取右边盒子中的图片
           var img=rightBox.querySelector("img")
           //给右边图片设置偏移量
           //左盒子里面移动200px 右盒子里面的图片就移动400px 实现等比放大
           img.style.left=-2*imgLeft+'px'
           img.style.top=-2*imgTop+'px'
       }
    </script>