Mr.ni放大镜

window.onload = function () {
    var small = document.querySelector(".small");
    var pointer = document.querySelector(".pointer");
    var big = document.querySelector(".big");
    var bigImg = document.querySelector(".big img");
    function getLeft (obj) {
        var ileft=0;
        while(obj){
            ileft+=obj.offsetLeft;
            obj=obj.offsetParent;
        }
        return ileft;
    }
    function getTop (obj) {
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var itop=0;
        while(obj){
            itop+=obj.offsetTop;
            obj=obj.offsetParent;
        }
        return itop-scrollTop;
    }
    small.onmouseover = function () {
        pointer.style.display = "block";
        big.style.display = "block";
    };
    small.onmouseout = function () {
        pointer.style.display = "none";
        big.style.display = "none";
    };
    small.onmousemove = function (event){
        var oEvent = event || window.event;

        var x = oEvent.clientX;
        var y = oEvent.clientY;
        var _left = x - pointer.offsetWidth/2-getLeft(small);
        var _top = y -pointer.offsetHeight/2-getTop(small);
        if(_top<=0)
            _top = 0;
        else if(_top>=small.offsetHeight-pointer.offsetHeight)
            _top = small.offsetHeight-pointer.offsetHeight;
        if(_left<=0)
            _left = 0;
        else if(_left>=small.offsetWidth-pointer.offsetWidth)
            _left = small.offsetWidth-pointer.offsetWidth;
        pointer.style.top = _top + "px";
        pointer.style.left = _left + "px";
        var w = _left/(small.offsetWidth-pointer.offsetWidth);
        var h = _top/(small.offsetHeight-pointer.offsetHeight);
        var b_bimg_top = (bigImg.offsetHeight-big.offsetHeight)*h;
        var b_bimg_left = (bigImg.offsetWidth-big.offsetWidth)*w;
        bigImg.style.top = -b_bimg_top + "px";
        bigImg.style.left = -b_bimg_left + "px";
    }
}