HTML+CSS+JavaScript制作弹幕效果

news2025/1/23 9:14:42

全屏弹幕

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WthBxEGK-1685321359567)(E:\前端\JavaScript\弹幕效果\弹幕效果.assets\image-20230409193631174.png)]$

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹幕效果</title>
    <style>
        /* 设置弹幕的样式 */
        .bullet {
            position: absolute;
            font-size: 20px;
            color: white;
            text-shadow: 1px 1px 1px black;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    // 获取弹幕容器
    var container = document.getElementById('container');
    // 定义弹幕数据
    var data = [
        { text: '这是第一条弹幕', color: 'red' },
        { text: '这是第二条弹幕', color: 'green' },
        { text: '这是第三条弹幕', color: 'blue' }
    ];
    // 定义弹幕速度
    var speed = 2;
    // 定义弹幕间隔
    var interval = 1000;
    // 定义弹幕位置
    var topArr = [];
    for (var i = 0; i < 10; i++) {
        topArr.push(i * 30);
    }
    // 定义弹幕索引
    var index = 0;
    // 定义弹幕定时器
    var timer = setInterval(function() {
        // 获取弹幕数据
        var bullet = data[index];
        // 创建弹幕元素
        var span = document.createElement('span');
        span.className = 'bullet';
        span.innerText = bullet.text;
        span.style.color = bullet.color;
        // 随机获取弹幕位置
        var top = topArr[Math.floor(Math.random() * topArr.length)];
        span.style.top = top + 'px';
        // 将弹幕元素添加到容器中
        container.appendChild(span);
        // 计算弹幕宽度
        var width = span.offsetWidth;
        // 定义弹幕起始位置
        var left = container.offsetWidth;
        span.style.left = left + 'px';
        // 定义弹幕移动定时器
        var bulletTimer = setInterval(function() {
            // 计算弹幕当前位置
            left -= speed;
            span.style.left = left + 'px';
            // 判断弹幕是否移出容器
            if (left < -width) {
                // 移除弹幕元素
                container.removeChild(span);
                // 清除弹幕移动定时器
                clearInterval(bulletTimer);
            }
        }, 10);
        // 更新弹幕索引
        index++;
        if (index >= data.length) {
            index = 0;
        }
    }, interval);
</script>
</body>
</html>

盒子弹幕

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oXBnQIxE-1685321359568)(E:\前端\JavaScript\弹幕效果\弹幕效果.assets\image-20230409193750938.png)]$

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple Danmaku Effect</title>
    <style>
        /*  danmaku容器的样式 */
        .danmaku-container {
            position: relative;
            height: 300px;
            background-color: black;
            color: white;
            font-size: 20px;
            overflow: hidden;
        }

        /* danmaku的样式 */
        .danmaku {
            position: absolute;
            top: 0;
            white-space: nowrap;
            opacity: 0.8;
        }
    </style>
</head>
<body>
<div class="danmaku-container"></div>
<script>
    // 函数用于创建新的弹库
    function createDanmaku(text) {
        // Create a new danmaku element
        var danmaku = document.createElement("div");
        danmaku.classList.add("danmaku");
        danmaku.innerText = text;

     //设置danmaku位置到容器的右边缘
        danmaku.style.right = "0";

        //设置danmaku顶部位置为0到容器高度之间的随机值
        var container = document.querySelector(".danmaku-container");
        danmaku.style.top = Math.floor(Math.random() * container.offsetHeight) + "px";

        //添加danmaku到容器
        container.appendChild(danmaku);

        //将danmaku动画到容器的左边缘
        var animationDuration = 5000; // 5 秒
        var danmakuWidth = danmaku.offsetWidth;
        var containerWidth = container.offsetWidth;
        var distance = containerWidth + danmakuWidth;
        var duration = (distance / containerWidth) * animationDuration;
        danmaku.style.transition = "transform " + duration + "ms linear";
        danmaku.style.transform = "translateX(-" + distance + "px)";

        // 动画完成后从容器中移除弹幕
        setTimeout(function() {
            danmaku.remove();
        }, duration);
    }

    // 函数生成随机弹库文本

 
    function generateDanmakuText() {
        var texts = ["Hello", "World", "Lorem", "Ipsum", "Dolor", "Sit", "Amet"];
        var index = Math.floor(Math.random() * texts.length);
        return texts[index];
    }

    // 每2秒生成一个新的弹幕
    setInterval(function() {
        var text = generateDanmakuText();
        createDanmaku(text);
    }, 2000);
</script>
</body>
</html>

视频弹幕

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOQBYeH7-1685321359569)(E:\前端\JavaScript\弹幕效果\弹幕效果.assets\image-20230409213636880.png)]$

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹幕效果</title>
    <style>
        #video-container {
            position: relative;
            width: 640px;
            height: 360px;
            margin: 0 auto;
        }
        #video {
            width: 100%;
            height: 100%;
        }
        #danmu-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .danmu {
            position: absolute; /* 定位弹幕 */
            font-size: 24px; /* 设置字体大小 */
            white-space: normal; /* 防止换行 */
            color: white; /* 设置字体颜色 */
            text-shadow: 1px 1px 2px black; /* 添加文字阴影 */
            animation: move 10s linear forwards; /* 设置动画 移动   10秒  线性向前  向前 */
           
        }
        /*
        使用@keyframes 规则定义，指定动画名称move和动画的关键帧
        from：关键帧指定动画的的起始状态，即将弹幕元素向右平移其宽度的2500％。
        to：关键帧指定动画的结束状态，即将弹幕元素向左平移其宽度的100％。
        transform属性用于指定平移。
         */
        @keyframes move {
            from {
                transform: translateX(640px);
            }
            to {
                transform: translateX(-200%);
            }
        }

        .box1{
            display: flex; /*排成一行，并根据需要换行。*/
            justify-content: center; /*在主轴上居中对齐。*/
            margin-top: 40px;/*元素之间留出40像素的空间 */
        }
        /*
            弹幕输入框
        */
        .box1 .barrage-input{
            padding: 10px;   /*内边距*/
            font-size: 16px;  /*字体大小*/
            border-radius: 5px;  /* 边框圆角*/
            border: none;  /* 去掉边框*/
            box-shadow: 1px 1px 2px gray;  /* 添加阴影*/
        }
        /*
            弹幕提交按钮
        */
        .box1 .barrage-but{
            padding: 10px;  /* 内边距*/
            font-size: 16px;  /* 字体大小*/
            border-radius: 5px;  /* 边框圆角*/
            border: none;  /* 去掉边框*/
            box-shadow: 1px 1px 2px gray;  /* 添加阴影*/
            background-color: #4CAF50;  /* 背景颜色*/
            color: white;  /* 字体颜色*/

        }
    </style>
</head>
<body>
<div id="video-container">
    <video id="video" src="Docker.mp4" controls></video>
    <div id="danmu-container"></div>
</div>
<div class="box1">
    <input type="text" id="danmu-input" placeholder="请输入弹幕" class="barrage-input">
    <button id="danmu-send" class="barrage-but">发送</button>
</div>
<script>
    // 获取弹幕容器、输入框和发送按钮
    const danmuContainer = document.getElementById('danmu-container');
    const danmuInput = document.getElementById('danmu-input');
    const danmuSend = document.getElementById('danmu-send');

    // 给发送按钮添加点击事件监听器
    danmuSend.addEventListener('click', () => {
        // 创建一个新的div元素
        const danmu = document.createElement('div');
        // 添加danmu类
        danmu.classList.add('danmu');
        // 设置弹幕文本为输入框中的值
        danmu.innerText = danmuInput.value;
        // 将弹幕添加到弹幕容器中
        danmuContainer.appendChild(danmu);
        // 清空输入框
        danmuInput.value = '';

    });


</script>
</body>
</html>