js实现简单放大镜功能(附源码)

需求：

1. 用户鼠标移入出现遮罩层（即放大镜），
2. 同时右侧显现放大同样位置的图片，
3. 鼠标移出,遮罩层和放大的图片隐藏不见，
4. 鼠标移动，遮罩层移动，显示大图的位置也移动。
5. 遮罩层的移动范围只限于图片的容器内部。

 步骤如下：

1：首先分析布局

实现放大镜功能要先有原图片和放大后的图片，先设置一个div大盒子,大盒子里面设置两个盒子，左边盒子的背景设置为需要放大的图片，右边的盒子放入放大后的图片，左边盒子里面放入一个小的遮罩层，并设置为绝对定位，便于后续移动

 布局如下

 <div class="fang">
        <div id="smallImg">
           <div id="smallDiv"></div>
        </div>
        <div id="bigDiv">
            <img src="OIp-C.jpg" alt="" id="bigImg">
        </div>
    </div>

style样式如下

  <style>
        *{
            margin: 0px;padding: 0px;
        }
        .fang{
        }
        #smallImg{
            width: 300px;
            height: 300px;
            background: url(OIp-C.jpg) 0px 0px/cover;
        }
        #bigDiv{
            width: 400px;
            height: 400px;
            position: absolute;
            left: 300px;
            top: 0px;
            overflow: hidden;
            display: none;
            /* background-color: red; */
        } 
        #bigImg{
            width: 1200px;
            height: 1200px;
            position: absolute;
        }
        #smallDiv{
            width: 100px;
            height: 100px;
            background-color: rgba(255,150, 0, 0.5);
            position: absolute;
            display: none;
        }

    </style>

 2：分析js功能实现

首先创建相应的节点对象

 var smallImgObj=document.getElementById('smallImg');
 var smallDivObj=document.getElementById('smallDiv');
 var bigDivObj=document.getElementById('bigDiv');

 其中smallImgObj是需要放大图片的节点对象

smallDivObj是遮罩层节点对象

bigDivObj是右边div的节点对象

 监听事件，当鼠标移入小图片时，小方块和大图像出现

smallImgObj.addEventListener('mouseover',function(){
    smallDivObj.style.display='block';
    bigDivObj.style.display='block';
})

鼠标移出时，遮罩层和右边div方块隐藏

smallImgObj.addEventListener('mouseout',function(){
    smallDivObj.style.display='none';
    bigDivObj.style.display='none';
})

 鼠标移动时，使小方块也移动 小图移动方向和大图方向相反

核心：整个放大镜功难在在一个比列

小div/小图=大div/大图      100/300=400/1200

 分析：尺寸大小->结论：3倍

 监听事件，当鼠标移入到小div时，触发addEventListener事件

smallImg.addEventListener('mousemove',function(e){}）

鼠标距元素内的左上距离

    sx=e.clientX-smallImgObj.offsetLeft;
    sy=e.clientY-smallImgObj.offsetTop;
    // console.log(sx,sy);

遮罩层的实际移动距离

    x=sx-smallDivObj.offsetWidth/2;
    y=sy-smallDivObj.offsetHeight/2;

在这里要对遮罩层的位置做一下判断，如果遮罩层top,left的值超过200,0时，就需要特殊操作，也就是说设置条件不让遮罩层移入到小div外面

 if(x>=200) x=200;
    if(x<=0)  x=0;
    if(y>=200) y=200;
    if(y<=0)  y=0;

大图的移动距离是难点，也是核心，进过上面的分析后知道大图的移动距离是遮罩层移动的3倍且方向相反

   var bigImg=document.getElementById('bigImg');
    bigImg.style.left=-3*x+'px';
    bigImg.style.top=-3*y+'px';

3：完整js代码如下

<script>
 //获得各节点对象
 var smallImgObj=document.getElementById('smallImg');
 var smallDivObj=document.getElementById('smallDiv');
 var bigDivObj=document.getElementById('bigDiv');
 console.log(bigDivObj);
//  console.log(smallImgObj,smallDivObj,bigImgObj);
//监听事件，当鼠标移入小图片时，小方块和大图像出现
smallImgObj.addEventListener('mouseover',function(){
    smallDivObj.style.display='block';
    bigDivObj.style.display='block';
})
//鼠标移出时，都消失
smallImgObj.addEventListener('mouseout',function(){
    smallDivObj.style.display='none';
    bigDivObj.style.display='none';
})
//鼠标移动时，使小方块也移动   小图移动方向和大图方向相反

//核心：整个放大镜功能醉在一个比列
//小div/小图=大div/大图
//分析：尺寸大小->结论：3倍
smallImg.addEventListener('mousemove',function(e){
     var e = e ||  window.event;
    //  console.log(e);
    //鼠标距元素内的左上距离
    sx=e.clientX-smallImgObj.offsetLeft;
    sy=e.clientY-smallImgObj.offsetTop;
    // console.log(sx,sy);
    //小方块的实际移动距离
    x=sx-smallDivObj.offsetWidth/2;
    y=sy-smallDivObj.offsetHeight/2;
    if(x>=200) x=200;
    if(x<=0)  x=0;
    if(y>=200) y=200;
    if(y<=0)  y=0;

    smallDivObj.style.left=x+'px';
    smallDivObj.style.top=y+'px';
    // console.log(x,y);
    //大图实际移动距离
    var bigImg=document.getElementById('bigImg');
    bigImg.style.left=-3*x+'px';
    bigImg.style.top=-3*y+'px';


    
})
 
</script>