浮窗 - 代码天地

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

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

    #box {
        width: 200px;
        height: 200px;
        left: 0;
        top: 0;
        border: 1px solid #eee;
        box-shadow: 0 0 5px #ccc;
        position: absolute;
    }

    #box h2 {
        padding: 8px 4px;
        font-size: 16px;
        color: #666666;
    }

    #box p {
        padding: 8px 4px;
        font-size: 12px;
        color: #a9a9a9;
        line-height: 20px;
    }
    </style>
</head>

<body>
    <div id="box">
        <h2>小毛驴</h2>
        <p>我有一头小毛驴，我从来也不骑</p>
        <p>有一天我心血来潮骑着他去赶集</p>
        <p>我手里拿着小皮鞭真呀真得意</p>
        <p>不知怎么哗啦啦啦我摔了一身泥</p>
    </div>
    <script>
    let box = document.getElementById('box');

    let speedX = 1,
        speedY = 0.8;

    //水平方向运动最大值
    let maxL = document.documentElement.clientWidth - box.offsetWidth;
    let maxT = document.documentElement.clientHeight - box.offsetHeight;

    let timer = null;

    box.onmouseenter = function() {
        clearInterval(timer);
    };
    box.onmouseleave = function() {
        autoMove();
    };
    autoMove();

    function autoMove() {
        timer = setInterval(() => {
            speedX = speedX;
            speedY = speedY;
            let nextX = box.offsetLeft + speedX;
            let nextY = box.offsetTop + speedY;

            //左侧边界
            if (nextX <= 0) {
                nextX = 0;
                speedX *= -1;
            }

            //上侧边界
            if (nextY <= 0) {
                nextY = 0;
                speedY *= -1;
            }

            //右侧边界
            if (nextX >= maxL) {
                nextX = maxL;
                speedX *= -1;
            }

            //底侧边界
            if (nextY >= maxT) {
                nextY = maxT;
                speedY *= -1;
            }
            box.style.left = nextX + 'px';
            box.style.top = nextY + 'px';

        }, 15);
    }
    </script>
</body>

</html>
浮窗

猜你喜欢
