放大镜效果

.box {
width: 400px;
height: 400px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 410px;
border: 1px solid #ccc;
overflow: hidden;
display: none;

}

.mask {
width: 200px;
height: 200px;
background-color:rgba(255,255,0,0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
img {
position: absolute;
}

<div class="box" id="box">
    <div class="small">
    <img src="img/aoteman.jpg" width="400" height="400" alt="">
    <div class="mask"></div>            
    </div>
     <div class="big">
         <img src="img/aoteman.jpg" width="800" height="800" alt="">
     </div>
</div>
<script>
    //鼠标经过的时候，显示mask和big，当鼠标离开box的时候隐藏mask和big
    //当鼠标在盒子中移动的时候，让mask和鼠标一起移动
    //当mask移动的时候，让大图移动
    var  box=document.getElementById('box');
    var small=box.children[0];
    var big=box.children[1];
    var smallimage = small.children[0];
    var mask=small.children[1];
    var bigimage=big.children[0];

    box.onmouseover = function () {
    mask.style.display = 'block';
    big.style.display = 'block';
    }
    box.onmouseout = function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    }
    box.onmousemove = function (e) {
        var maskX = e.pageX - box.offsetLeft;
        var maskY = e.pageY - box.offsetTop;
        maskX = maskX - mask.offsetWidth/2;
        maskY = maskY - mask.offsetWidth/2;
        maskX = maskX < 0 ?  0  : maskX;
        maskY = maskY < 0 ?  0 : maskY;
        maskX = maskX >box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mack.offsetWidth: maskX;
        maskY = maskY >box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mack.offsetHeight: maskY;

        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
    //mask移动的距离 /mask最大能够移动的距离 = 大图片移动的距离/大图片最大能够移动的距离
    //mask 最大能够移动的距离
    var maskmax = box.offsetWidth - mask.offsetWidth;
    var bigimagemax = bigimage.offsetWidth - big.offsetWidth;
    var  bigimageX = maskX * bigimagemax/maskmax;
    var bigimageY = maskY * bigimagemax/maskmax;
   bigimage.style.top =  ( -bigimageY) + 'px';
   bigimage.style.left =  (-bigimageX) + 'px';

    }

</script>