javascript实现弹幕效果_js弹幕插件-CSDN博客

本文链接：https://blog.csdn.net/weixin_45075226/article/details/145977815

本篇文章将使用 JavaScript 实现简单弹幕效果。

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript实现弹幕效果</title>
    <style>
        /* 弹幕显示区域样式 */
        #oneDanmuContainer {
            width: 800px;
            height: 400px;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        /* 弹幕元素样式 */
        .oneDanmu {
            position: absolute;
            top: 50%;
            white-space: nowrap;
            animation: moveOneDanmu 10s linear infinite;
        }

        /* 弹幕动画 */
        @keyframes moveOneDanmu {
            from {
                left: 100%;
            }
            to {
                left: -100%;
            }
        }
    </style>
</head>

<body>
    <input type="text" id="oneDanmuInput" placeholder="输入弹幕内容">
    <button id="oneSendButton">发送</button>
    <div id="oneDanmuContainer"></div>

    <script>
        const oneDanmuInput = document.getElementById('oneDanmuInput');
        const oneSendButton = document.getElementById('oneSendButton');
        const oneDanmuContainer = document.getElementById('oneDanmuContainer');

        // 为发送按钮添加点击事件监听器
        oneSendButton.addEventListener('click', function () {
            
            const oneDanmuText = oneDanmuInput.value;
            if (oneDanmuText.trim() !== '') {
                // 创建一个新的弹幕元素
                const oneDanmuElement = document.createElement('div');
                oneDanmuElement.classList.add('oneDanmu');
                oneDanmuElement.textContent = oneDanmuText;

               
                const oneRandomTop = Math.random() * (oneDanmuContainer.offsetHeight - 20);
                oneDanmuElement.style.top = oneRandomTop + 'px';

            
                oneDanmuContainer.appendChild(oneDanmuElement);

          
                oneDanmuInput.value = '';

                oneDanmuElement.addEventListener('animationend', function () {
                    oneDanmuElement.remove();
                });
            }
        });
    </script>
</body>

</html>