简单的JS放大镜

CSS

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                padding: 100px;
                overflow: hidden;
            }
            
            #min {
                width: 350px;
                height: 350px;
                float: left;
                border: 1px solid red;
                position: relative;
                margin-right: 20px;
            }
            
            #mask {
                width: 100px;
                height: 100px;
                background-color: lightgray;
                opacity: 0.2;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
            #max{
                width: 350px;
                height: 350px;
                border: 1px solid black;
                float: left;
                position: relative;
                overflow: hidden;
                display: none;
            }
            #max Img{
                position: absolute;
            }
        </style>

DOM

    <div id="min">
            ![](img/min.jpg)
            <div id="mask"></div>
        </div>
        <div id="max">
            ![](img/max.jpg);
        </div>

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";
        }