mac停靠栏

2021-11-29 16:33:29 作者：互联网
<!DOCTYPE html>
<html lang="zh">

<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: 0;
            padding: 0;
        }

        img {
            border-radius: 20px;
            margin: 10px;
        }

        .wrap {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <img id="img1" src="../images/1.jpg" width="100" alt="">
        <img id="img2" src="../images/2.jpg" width="100" alt="">
        <img id="img3" src="../images/3.jpg" width="100" alt="">
        <img id="img4" src="../images/4.jpg" width="100" alt="">
        <img id="img5" src="../images/5.jpg" width="100" alt="">
        <img id="img6" src="../images/6.jpg" width="100" alt="">
    </div>
    <script>
        window.onload = function () {
            const imgs = document.querySelectorAll("img")
            window.addEventListener('mousemove', event => {
                const r = 300
                const x = event.clientX
                const y = event.clientY
                imgs.forEach(item => {
                    let temp = item.getBoundingClientRect()
                    let l = temp.width / 2 + temp.left - x
                    let w = temp.height / 2 + temp.top - y
                    let hypotenuse = Math.sqrt(l * l + w * w)
                    if (hypotenuse >= r) {
                        hypotenuse = r
                    }
                    item.style.width = 160 - hypotenuse * 0.2 + 'px'
                })
            })
        }
    </script>

</body>

</html>
标签：const,temp,mac,item,hypotenuse,let,停靠,event
来源： https://www.cnblogs.com/letgofishing/p/15620041.html