JS小练————放大镜效果（含注释）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0;
        }

        .box {
            height: 500px;
            width: 500px;
            border: 1px solid #E6E9E6;
            position: relative;
            margin-left: 100px;
            text-align: center;
            float: left;
        }

        .box img {
            height: 250px;
        }

        .yellow {
            height: 300px;
            width: 300px;
            background-color: rgba(0, 0, 255, .5);
            position: absolute;
            top: 0px;
            left: 200px;
            display: none;
            pointer-events: none;
            /* 解决遮盖层闪烁问题 */
        }
        .big{
            height: 800px;
            width: 800px;
            border: 1px solid #E6E9E6;
            float: right;
            position: relative;
            overflow: hidden;
        }
        .big img{
            height: 600px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="box"><img src="../img/1.png" class="small" alt=""><div class="yellow"></div></div>
    <div class="big"><img src="../img/1.png" class="bigimg" alt=""></div>
    <script>
        let yellow = document.querySelector(".yellow")
        let box = document.querySelector(".box")
        let img = document.querySelector(".small")
        let big =document.querySelector(".big")
        let bigimg=document.querySelector(".bigimg")
        // 引入元素
        box.addEventListener("mouseover", function (e) {
            // 鼠标划过事件
            yellow.style.display = "block"
            // 显示
        })
        box.addEventListener("mouseout", function (e) {
            yellow.style.display = "none"
        })
        box.addEventListener("mousemove", function (e) {
            let x = e.pageX - box.offsetLeft
            let y = e.pageY - box.offsetTop
            // console.log(x,y);
            // 鼠标坐标减盒子距离 即鼠标在盒子内坐标           
            yellow.style.left = x - yellow.offsetWidth/2 + "px"
            // 遮盖层x坐标
            yellow.style.top = y - yellow.offsetHeight/ 2 + "px"
            // 遮盖层y坐标
            x=x-yellow.offsetWidth/2
            y=y-yellow.offsetHeight/2
            // 减去遮盖层的一半
            if(x<=0){
                yellow.style.left=0+"px"
                // 遮盖层y坐标 一定要记得加px！
            }
            else if(x>=box.offsetWidth-yellow.offsetWidth){
                yellow.style.left=box.offsetWidth-yellow.offsetWidth+"px"
                // 遮盖层x坐标
            }
            if(y<=0){
                yellow.style.top=0+"px"
            }
            else if(y>=box.offsetHeight-yellow.offsetHeight){
                yellow.style.top=box.offsetHeight-yellow.offsetHeight+"px"
            }
            let smallx=box.offsetWidth-yellow.offsetWidth
            // 小图x方向移动范围
            let smally=box.offsetHeight-yellow.offsetHeight
            // 小图y方向移动范围
            let smallX=e.pageX - box.offsetLeft- yellow.offsetWidth/2
            // 小图x方向坐标
            let smallY=e.pageY - box.offsetTop- yellow.offsetHeight/ 2
            // 小图y方向坐标
            let bigx=big.offsetWidth-bigimg.offsetWidth
            // 大图x方向移动范围
            let bigy=big.offsetHeight-bigimg.offsetHeight
            // 大图y方向移动范围
            let bigX=bigx*smallX/smallx
            // 大图x坐标
            let bigY=bigy*smallY/smally
            // 大图y坐标
            bigimg.style.top=-bigY+"px"
            bigimg.style.left=bigX+"px"
        })
        
    </script>
</body>

</html>
JS小练————放大镜效果（含注释）

猜你喜欢
