网页弹幕效果代码

发表于JS技术学习版块教程

一个简单的HTML、CSS和JavaScript代码，实现网页弹幕效果。以下是代码：<!DOCTYPE html> <html lang= en &g

一个简单的HTML、CSS和JavaScript代码，实现网页弹幕效果。以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>弹幕效果</title>
   <style>
        #danmaku {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .danmaku-item {
            position: absolute;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div id="danmaku"></div>
   <script>
        const danmakuContainer = document.getElementById('danmaku');
        const danmakuData = [
            { text: '弹幕1', top: '10%', left: '100%' },
            { text: '弹幕2', top: '20%', left: '100%' },
            { text: '弹幕3', top: '30%', left: '100%' },
        ];

        function createDanmakuItem(data) {
            const item = document.createElement('div');
            item.classList.add('danmaku-item');
            item.textContent = data.text;
            item.style.top = data.top;
            item.style.left = data.left;
            return item;
        }

        function animateDanmakuItem(item, duration) {
            const startTime = Date.now();
            const startLeft = parseFloat(item.style.left);
            const endLeft = -item.offsetWidth;

            function updatePosition() {
                const progress = (Date.now() - startTime) / duration;
                const currentLeft = startLeft - (startLeft - endLeft) * progress;
                item.style.left = `${currentLeft}px`;

                if (progress < 1) {
                    requestAnimationFrame(updatePosition);
                } else {
                    danmakuContainer.removeChild(item);
                }
            }

            requestAnimationFrame(updatePosition);
        }

        function showDanmaku(data) {
            const item = createDanmakuItem(data);
            danmakuContainer.appendChild(item);
            animateDanmakuItem(item, 5000);
        }

        danmakuData.forEach(showDanmaku);
    </script>
</body>
</html>

这个代码实现了一个简单的弹幕效果，弹幕从右侧滑动到左侧。您可以根据需要修改样式和弹幕数据。请将此代码保存为一个HTML文件，然后用浏览器打开它以查看效果。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。