간단한 JS 돋보기

    

            ![](img/min.jpg)
            

        
        

            ![](img/max.jpg);
        

JS

var oMin = document.getElementById("min"),
        oMask = document.getElementById("mask"),
        oMax = document.getElementById("max"),
        oMaxImg = document.getElementById("maxImg");

        oMin.onmouseover = function() {
            oMask.style.display = "block";
            oMax.style.display = "block";
        }
        oMin.onmouseout = function() {
                oMask.style.display = "none";
                oMax.style.display = "none";
            }
            //       

        oMin.onmousemove = function(e) {
            var e = e || window.event;
            //           
            //      
            console.log(oMin.clientWidth+"///"+oMask.offsetWidth);
            var maxWidth = oMin.clientWidth - oMask.offsetWidth;
            var maxHeight = oMin.clientHeight - oMask.offsetHeight;
            //MX  MY             -  min     
            var mX = e.pageX - oMin.offsetLeft;
            var mY = e.pageY - oMin.offsetTop;
            
            var currentLeft = mX - oMask.offsetWidth / 2;
            var currentTop = mY - oMask.offsetHeight / 2;
            console.log(currentLeft);
            console.log(currentTop);
            //           
            //     
            if(currentLeft >= maxWidth) {
                currentLeft = maxWidth;
            } else if(currentLeft <= 0) {
                currentLeft = 0;
            }
            if(currentTop >= maxHeight) {
                currentTop = maxHeight;
            } else if(currentTop <= 0) {
                currentTop = 0;
            }
            //        top left 
            oMask.style.left = currentLeft + 'px';
            oMask.style.top = currentTop + 'px';
            //    
            var ratioX = currentLeft / maxWidth;
            var ratioY = currentTop / maxHeight;
            oMaxImg.style.left = (oMax.clientWidth - oMaxImg.offsetWidth) * ratioX + "px";
            oMaxImg.style.top = (oMax.clientHeight - oMaxImg.offsetHeight) * ratioY + "px";
        }