需求： 用户鼠标移入出现遮罩层（即放大镜），同时右侧显现放大同样位置的图片js实现图片放大镜效果，鼠标移出,遮罩层和放大的图片隐藏不见，鼠标移动，遮罩层移动，显示大图的位置也移动。遮罩层的移动范围只限于图片的容器内部。 步骤如下： 1：首先分析布局

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

  布局如下

            
               
            
            
                ![js实现图片放大镜效果_js 图片缓慢放大效果_jquery实现图片放大预览效果][1]
            

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

  2：分析js功能实现

  首先创建相应的节点对象

   var smallImgObj=document.getElementById('smallImg');

     var smallDivObj=document.getElementById('smallDiv');

  其中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;

  遮罩层的实际移动距离

   x=sx-smallDivObj.offsetWidth/2;

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

<p><pre> if(x>=200) x=200;

if(x=200) y=200;
if(y结论：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=200) y=200;
if(y