JavaScript——实现放大镜效果

  * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: #000;
    }
    
    #box {
        width: 900px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
    }
    
    #min {
        width: 400px;
        height: 400px;
        float: left;
        position: relative;
    }
    
    #max {
        width: 400px;
        height: 400px;
        overflow: hidden;
        float: right;
        position: relative;
        display: none;
    }
    
    b {
        position: absolute;
        width: 200px;
        height: 200px;
        background: yellow;
        opacity: 0.5;
        left: 0;
        top: 0;
        display: none;
    }
    
    #imgs {
        position: absolute;
        left: 0;
        top: 0;
    }
    
    h1 {
        color: yellow;
        text-align: center;
        padding-top: 50px;
    }

 <h1>放大镜</h1>
    <div id="box">
        <div id="min"><img src="./imgs/min.jpg"><b></b></div>
        <div id="max"><img src="./imgs/max.jpg" id="imgs"></div>
    </div>

var min = document.getElementById("min");
    var max = document.getElementById("max");
    var imgs = document.getElementById("imgs");
    var b = document.getElementsByTagName("b")[0];
    min.onmousemove = function(e) {
        b.style.display = "block";
        max.style.display = "block";
        var e = e || window.event;
        var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var x = e.clientX + scrollLeft - min.offsetLeft - b.offsetWidth / 2;
        var y = e.clientY + scrollTop - min.offsetTop - b.offsetHeight / 2;
        if (x < 0) {
            x = 0;
        } else if (x > min.offsetWidth - b.offsetWidth) {
            x = min.offsetWidth - b.offsetWidth;
        }
        if (y < 0) {
            y = 0;
        } else if (y > min.offsetHeight - b.offsetHeight) {
            y = min.offsetHeight - b.offsetHeight;
        }
        b.style.left = x + "px";
        b.style.top = y + "px";

        imgs.style.left = -2 * x + "px";
        imgs.style.top = -2 * y + "px";
    }
    min.onmouseout = function() {
        b.style.display = "none";
        max.style.display = "none";
    }