var small = document.getElementById("small");
var drag = document.getElementById("drag");
var big = document.getElementById("big");
var bigImg = document.getElementById("bigImg");

small.onmouseover = function() {
    drag.style.display = 'block';
    big.style.display = 'block';
}

small.onmouseout = function() {
    drag.style.display = 'none';
    big.style.display = 'none';
}

small.onmousemove = function(e) {
    var smallLeft = e.clientX - drag.offsetWidth / 2;
    var smallTop = e.clientY - drag.offsetHeight / 2;
    drag.style.left = smallLeft + 'px';
    drag.style.top = smallTop + 'px';
    if(drag.offsetLeft <= 0) {
        drag.style.left = 0;
    }
    if(drag.offsetTop <= 0) {
        drag.style.top = 0;
    }
    // 遮罩层最大移动距离
    var left1 = small.offsetWidth - drag.offsetWidth;
    var top1 = small.offsetHeight - drag.offsetHeight;
    if(drag.offsetLeft > left1) {
        drag.style.left = left1 + 'px';
    }
    if(drag.offsetTop > top1) {
        drag.style.top = top1 + 'px';
    }
    var x = drag.offsetLeft / left1;
    var y = drag.offsetTop / top1;
    // 大图可移动距离
    var bigLeft = bigImg.offsetWidth - big.offsetWidth;
    var bigTop = bigImg.offsetHeight - big.offsetHeight;

    bigImg.style.left = -bigLeft * x + 'px';
    bigImg.style.top = -bigTop * y + 'px';
}