图片放大效果设计

<div class="box" id="fdj">
    <!--小盒子-->
    <div class="small">
        <img src="images/001.jpg" alt=""/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/0001.jpg" alt=""/>
    </div>

</div>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 350px;
        height: 350px;
        margin: 100px;
        position: relative;
        border: 1px solid #cccccc;
    }
    .small{
        width: 350px;
        height: 350px;
        position: relative;
    }
    .mask{
        width: 150px;
        height: 150px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255,255,0,0.4);
        cursor: crosshair;
        display: none;
    }
    .big{
        width: 500px;
        height: 500px;
        position: absolute;
        left: 360px;
        top: -1px;
        border: 1px solid #cccccc;
        overflow: hidden;
        display: none;
    }
    .big img{
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<script>
    var fdj = document.getElementById("fdj");
    var small = fdj.children[0];
    var mask  = small.children[1];
    var big = fdj.children[1];
    var bigimg = big.children[0];
//鼠标经过效果
    fdj.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    };
    fdj.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    };
//鼠标移动小黄块效果
    fdj.onmousemove = function (ev) {
        var ev = ev||window.event;
        var x = ev.clientX-this.offsetLeft-mask.offsetWidth/2;
        var y = ev.clientY-this.offsetTop-mask.offsetHeight/2;
        x<0? x=0:x;
        x>this.offsetWidth-mask.offsetWidth? x=this.offsetWidth-mask.offsetWidth:x;
        y<0? y=0:y;
        y>this.offsetHeight-mask.offsetHeight? y=this.offsetHeight-mask.offsetHeight:y;
        mask.style.left = x+"px";
        mask.style.top = y+"px";

        //鼠标在小图片上左移，大图片右移，鼠标在小图片上移，大图片下移；
        bigimg.style.left = -x*big.offsetWidth/small.offsetWidth+"px";
        bigimg.style.top = -y*big.offsetHeight/small.offsetHeight+"px";
    }
</script>