原生js实现放大镜效果

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 500px;
            height: 500px;
            border:1px solid black;
            position: relative;
            left: 50px;
        }

        #left span{
            width: 250px;
            height: 250px;
            position: absolute;
            left: 0;
            top:0;
            background-color: rgba(6,6,6,.6);
            display: none;
        }

        #right{
            position: absolute;
            left: 600px;
            top:0px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
            background-color: red;
        }
        #right img{
            position: absolute;
            left: 0;
            top:0;
            width: 200%;
            height: 200%;
        }

    </style>
</head>
<body>
    <div id="left">
        <img src="./12.jpg">
        <span></span>

    </div>
    <div id="right">
        <img src="./12.jpg">
    </div>
    <script>
        var divLeft =  document.getElementById("left")
        var divRight = document.getElementById("right")
        var span = document.querySelector("#left span")
        var bigImage = document.querySelector("#right img")
        divLeft.onmouseover = function(){ 
            span.style.display="block"
            divRight.style.display="block"
        }
        divLeft.onmouseout = function(){ 
            span.style.display="none"
            divRight.style.display="none"
        }
        divLeft.onmousemove = function(e){ 
            var spanLeft = e.clientX -divLeft.offsetLeft - span.offsetWidth/2
            var spanTop = e.clientY -divLeft.offsetTop - span.offsetHeight/2
            if(spanLeft < 0){
                spanLeft = 0
            }
            if(spanTop < 0){
                spanTop = 0
            }
            if(spanTop>250){
                spanTop = 250
            }
            if(spanLeft>250){
                spanLeft = 250
            }
            span.style.left = spanLeft + 'px';
            span.style.top = spanTop + 'px';
            let imageLeft = spanLeft * (bigImage.width - 500) / (500 - 250);
            let imageTop = spanTop * (bigImage.height - 500) / (500 - 250);
            bigImage.style.left = -imageLeft + 'px';
            bigImage.style.top = -imageTop + 'px';
        }

    </script>
</body>
</html>
自己找一个500*500的图片即可，一张即可