JS_模拟电商网站放大镜效果

很多电商网站，都有图片，鼠标移入图片会出现一个大图，随着鼠标的移动，大图的位置也会跟着移动

下面贴上代码

html:

<div class="enlageTool">
        <div class="normalImg" id="normalImg">
            <div class="enlageGlass" id="enlageGlass"></div>
        </div>
        <div class="enlageImg" id="enlageImg"></div>    
    </div>

css:

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.enlageTool{
    position: relative;
    margin:100px;
}
.normalImg{
    background: url('../images/notebook.jpeg') no-repeat;
    width: 350px;
    height: 350px;
    border: 1px solid #000;
}
.enlageImg{
    background: url('../images/notebook-big.jpeg') no-repeat left top;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    position: absolute;
    top: 0;
    left: 350px;
    display: none;
}
.enlageGlass{
    background: #fede4f;
    width: 175px;
    height: 175px;
    opacity: 0.5;
    cursor: move;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

common.js

var objAnim = function(){

    this.zoomMove =function(normalImg,enlageGlass,enlageImg,event){
        var e = event || window.event;
        var scrollPosX = window.pageXOffset || document.documentElement.scrollLeft;
        var scrollPosY = window.pageYOffset || document.documentElement.scrollTop;
        var times = enlageImg.offsetWidth/normalImg.offsetWidth;

        var desX = e.clientX - normalImg.parentNode.offsetLeft + scrollPosX - enlageGlass.offsetWidth/2;
        var desY = e.clientY - normalImg.parentNode.offsetTop + scrollPosY - enlageGlass.offsetHeight/2
        
        if(desX<0){
            desX = 0;
        }
        else if(desX > normalImg.offsetWidth - enlageGlass.offsetWidth){
            desX = normalImg.offsetWidth - enlageGlass.offsetWidth;
        }

        if(desY < 0){
            desY = 0;
        }
        else if(desY > normalImg.offsetHeight - enlageGlass.offsetHeight){
            desY = normalImg.offsetHeight - enlageGlass.offsetHeight;
        }

        enlageGlass.style.left = desX + "px";
        enlageGlass.style.top = desY +"px";

        enlageImg.style.backgroundPosition = -desX*times + "px "+(-desY*times) +"px";

    }

    this.zoomIn = function(enlageGlass,enlageImg){
        enlageImg.style.display = "block";
        enlageGlass.style.display = "block";
    }

    this.zoomOut = function(enlageGlass,enlageImg){
        enlageImg.style.display = "none";
        enlageGlass.style.display = "none";
    }

}

function.js

window.addEventListener("load",loadPage)

function loadPage(){
    var enlageGlass = document.getElementById("enlageGlass");
    var normalImg = document.getElementById("normalImg");
    var enlageImg = document.getElementById("enlageImg");

    var zoom = new objAnim();

    normalImg.addEventListener("mousemove",function(event){
        zoom.zoomMove(normalImg,enlageGlass,enlageImg,event);
    })

    normalImg.addEventListener("mouseover",function(){
        zoom.zoomIn(enlageGlass,enlageImg);
    })

    normalImg.addEventListener("mouseout",function(){
        zoom.zoomOut(enlageGlass,enlageImg);
    })
}

由于图片的限制原因，就不做效果展示了。

下面po一张效果截图供参考：

以上内容，如有错误请指出，不甚感激。