当前位置：首页 > article >正文

文本在屏幕上自由游动

article 2025/1/15 17:06:49

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本在屏幕上自由游动</title>
    <style>
        body {
            background-color: #000; /* 设置背景颜色为黑色 */
            width: 100%; /* 设置宽度为100% */
            height: 100vh; /* 设置高度为视口高度 */
            overflow: hidden; /* 隐藏溢出内容 */
            position: relative; /* 设置相对定位 */
        }

        div {
            background-color: #000; /* 设置背景颜色为黑色 */
            color: rgb(255, 255, 255); /* 设置文本颜色为白色 */
            font-size: 100px; /* 设置字体大小为100px */
            position: absolute; /* 设置绝对定位 */
            white-space: nowrap; /* 防止文本换行 */
            will-change: transform; /* 提示浏览器该元素会频繁变化 */
        }
    </style>
</head>

<body>
    <div id="movingText">文本在屏幕上自由游动</div>

    <script>
        (function () {
            // 错误处理：确保元素存在
            const textElement = document.getElementById('movingText');
            if (!textElement) {
                console.error('未找到元素 #movingText');
                return;
            }

            // 初始化位置和速度
            let x = Math.random() * (window.innerWidth - textElement.offsetWidth); /* 随机生成初始x坐标 */
            let y = Math.random() * (window.innerHeight - textElement.offsetHeight); /* 随机生成初始y坐标 */
            let dx = 0.5 + Math.random() * 0.011;  /* 设置x方向速度 */
            let dy = 0.5 + Math.random() * 0.011;  /* 设置y方向速度 */

            // 边界检测函数
            function checkBoundaries() {
                const maxX = window.innerWidth - textElement.offsetWidth; /* 计算x方向最大边界 */
                const maxY = window.innerHeight - textElement.offsetHeight; /* 计算y方向最大边界 */

                if (x > maxX || x < 0) { /* 如果x超出边界 */
                    dx = -dx; /* 反转x方向速度 */
                    x = Math.max(0, Math.min(x, maxX)); /* 防止文本超出边界 */
                }
                if (y > maxY || y < 0) { /* 如果y超出边界 */
                    dy = -dy; /* 反转y方向速度 */
                    y = Math.max(0, Math.min(y, maxY)); /* 防止文本超出边界 */
                }
            }

            // 动画循环
            function moveText() {
                x += dx; /* 更新x坐标 */
                y += dy; /* 更新y坐标 */

                checkBoundaries(); /* 检查边界 */

                // 使用 transform 替代 left 和 top
                textElement.style.transform = `translate(${x}px, ${y}px)`; /* 应用变换 */

                requestAnimationFrame(moveText); /* 请求下一帧动画 */
            }

            // 启动动画
            moveText(); /* 开始动画 */

            // 窗口大小变化时重新计算边界
            window.addEventListener('resize', () => {
                x = Math.random() * (window.innerWidth - textElement.offsetWidth); /* 重新计算x坐标 */
                y = Math.random() * (window.innerHeight - textElement.offsetHeight); /* 重新计算y坐标 */
            });
        })();
    </script>
</body>

</html>

查看全文

http://www.kler.cn/a/503857.html