WEB机试题--原生JS的放大镜

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 350px;
        height: 350px;
        position: relative;
        margin: 100px;
        border: 1px solid #000;
    }
    #smallbox{
        width: 350px;
        height: 350px;
    }
    #bigbox{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        overflow: hidden;
        position: absolute;
        left: 370px;
        top: 0;
        display: none;
    }
    #mask{
        width: 175px;
        height: 175px;
        background-color: rgba(255,255,0,0.4);
        position: absolute;
        left: 0;
        top: 0;
        cursor: move;
        display: none;
    }
</style>

<div id="box">
    <div id="smallbox">
        <img src="images/001.jpg" alt="" id="smallimg">
    <div id="mask"></div>
    </div>
    <div id="bigbox">
        <img src="images/0001.jpg" alt="" id="bigimg">
    </div>
</div>

var box=document.getElementById("box");
var smallimg=document.getElementById("smallimg");
var mask=document.getElementById("mask");
var bigbox=document.getElementById("bigbox");
var bigimg=document.getElementById("bigimg");

box.onmouseenter=function () {
    mask.style.display="block";
    bigbox.style.display="block";
};
box.onmouseleave=function () {
    mask.style.display="none";
    bigbox.style.display="none";
};
box.onmousemove=function (event) {
    event=event||window.event;
    var movex=getpageXY(event).x-box.offsetLeft;
    var movey=getpageXY(event).y-box.offsetTop;
    var x=movex-mask.offsetWidth/2;
    var y=movey-mask.offsetHeight/2;
    if (x<=0) {
        x=0;
    }
    if (y<=0){
        y=0;
    }
    if (x>=(box.offsetWidth-mask.offsetWidth)){
        x=box.offsetWidth-mask.offsetWidth-2;
    }
    if (y>=(box.offsetHeight-mask.offsetHeight)){
        y=box.offsetHeight-mask.offsetHeight-2;
    }
    mask.style.left=x+"px";
    mask.style.top=y+"px";
    
    var bili=smallimg.offsetWidth/bigimg.offsetWidth;
    var bigx=x/bili;
    var bigy=y/bili;

    bigimg.style.marginLeft=-bigx+"px";
    bigimg.style.marginTop=-bigy+"px";
};

function scroll() {
    if (window.pageYOffset!=undefined){
        return{
            left:window.pageXOffset,
            top:window.pageYOffset
        }
    } else {
        return{
            left:document.documentElement.scrollLeft,
            top:document.documentElement.scrollTop
        }
    }
}

function getpageXY(event) {
    return{
        x:scroll().left+event.clientX,
        y:scroll().top+event.clientY
    }
}