图片放大镜效果

实现效果如下图所示

以下为HTML代码

<div id="img1">
    <img src="img/b7003af33a87e95053e42ae21c385343faf2b449.jpg">
    <span></span>
</div>
<div id="img2">
    <img src="img/b7003af33a87e95053e42ae21c385343faf2b449.jpg">
</div>

以下为CSS代码

*{
    margin: 0;
    padding: 0;
}
#img1{
    position: relative;
    width: 450px;
    height: 300px;
}
#img1 img:nth-of-type(1){
}
#img2{
    position: relative;
    top: -300px;
    left: 450px;
    display: none;
    width: 430px;
    height: 430px;
    border: 1px solid aqua;
    overflow: hidden;
}
#img2 img{
    position: absolute;
    top:0;
    left: 0;
}
#img1 span{
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background-color: rgba(0,0,0,0.1);
}

以下为JS代码

window.onload=function () {
    //先获取页面元素
    var divOne=document.getElementById("img1");
    var divOneImg=divOne.getElementsByTagName("img")[0];
    var divTwo=document.getElementById("img2");
    var divTwoImg=divTwo.getElementsByTagName("img")[0];
    var omouse=document.getElementById("img1").getElementsByTagName("span")[0];
    //显示遮罩层和放大图片框
    divOne.addEventListener("mouseover",function () {
        omouse.style.display='block';
        divTwo.style.display="block";
    });
    //隐藏遮罩层和放大图片框
    divOne.addEventListener("mouseout",function () {
        omouse.style.display='none';
        divTwo.style.display="none";
    });
    divOne.addEventListener("mousemove",function (ev) {
        ev=ev||window.event;
        //获取鼠标的位置
        let currentMouseX=ev.pageX;
        let currentMouseY=ev.pageY;
        //获取被放大图片框距离左侧和顶部的值
        let offsetLeft=divOneImg.offsetLeft;
        let offestTop=divOneImg.offsetTop;
        //获取遮罩层的大小
        let omouseWidth=omouse.offsetWidth;
        let omouseHeight=omouse.offsetHeight;
        //计算鼠标移动后遮罩层的位置
        let zoomMouseX=currentMouseX-offsetLeft-omouseWidth/2;
        let zoomMouseY=currentMouseY-offestTop-omouseHeight/2;
        //限制鼠标上和左侧的范围
        if (zoomMouseX<=0){
            zoomMouseX=0;
        }
        if (zoomMouseY<=0){
            zoomMouseY=0;
        }
        //限制鼠标下和右侧的范围
        let maxX=divOneImg.offsetWidth-omouseWidth;
        if (zoomMouseX>=maxX){
            zoomMouseX=maxX;
        }
        let maxY=divOneImg.offsetHeight-omouseHeight;
        if (zoomMouseY>=maxY){
            zoomMouseY=maxY;
        }
        //赋给鼠标计算后的移动值
        omouse.style.left=zoomMouseX+'px';
        omouse.style.top=zoomMouseY+"px";
        divTwoImg.style.width="300%";
        divTwoImg.style.height="300%";
        //计算图片放大的后的比例和位置
        let zommDiv = (divTwoImg.offsetWidth - divTwo.offsetWidth) / (divOne.offsetWidth - omouseWidth);
        divTwoImg.style.left = -zommDiv * zoomMouseX + 'px';
        divTwoImg.style.top = -zommDiv * zoomMouseY + 'px';



    })
}