JavaScript 简单的弹幕功能的实现

最新推荐文章于 2023-04-28 09:42:38 发布

胖胖我有点烦

最新推荐文章于 2023-04-28 09:42:38 发布

阅读量515

点赞数

分类专栏：全部可见文章标签： javascript css3

本文链接：https://blog.csdn.net/JiangLittleBai/article/details/106168477

版权

本文介绍了如何使用JavaScript和CSS3实现简单的弹幕功能。基础版弹幕包含4个轨道，弹幕随机字体大小和颜色，从右向左滚动。通过添加时间字段控制弹幕出现时机，并实时展示新增弹幕。文章还提到了存在的问题，即大量弹幕可能导致DOM元素过多。

摘要由CSDN通过智能技术生成

在视频网站看视频的时候，经常能看到弹幕，某个时间段弹幕数超级多，某个时间段几乎没有，我们可以实时新增弹幕并且能实时出现在弹幕群中。
再次进入该视频后，会发现之前添加的弹幕还是在之前添加的时间点出现，当然还是可以再次添加弹幕。
那这样的弹幕效果是怎么实现的呢？

也是因为业务方向的原因，竟然从来没有做过弹幕功能，最近两天在复习，顺带就试着实现下弹幕功能。时间充裕的话会逐步完善优化弹幕效果

一、最最基础版

1、实现的效果：

总共4个弹幕轨道，在这4个弹幕轨道中展示所有的弹幕信息。
每条弹幕随机添加字体大小、颜色等。
从右向左，只显示一遍。
可以新增弹幕并实时展示出来，用黑框包裹新增的弹幕。

2、思路：

在视频网站看视频时可以注意到，每条弹幕是在指定的时间出现的。由此，可以给弹幕添加一个时间字段，用于表示该弹幕是在什么时候发送的。
写一个从右向左滚动的动画，动画的延迟时间就是弹幕出现的时间。
新增弹幕，因为要立即展示出来，则，延迟时间为0

3、效果图

在这里插入图片描述

4、整体代码如下：

<html>

<head>

</head>

<body>

    <style type="text/css">
        #danmu-wrap {
   
            width: 1200px;
            height: 520px;
            border: 1px solid #3c3c33;
            position: relative;
            overflow: hidden;
        }

        .danmu-area {
   
            width: 100%;
            height: 50%;
            border: 1px solid cadetblue;
            position: absolute;
        }

        .danmu-area .line {
   
            height: 40px;
            padding: 10px 0;
            line-height: 40px;
            position: absolute;
        }

        .danmu-area .line0 {
   
            top: 0;
        }

        .danmu-area .line1 {
   
            top: 60px;
        }

        .danmu-area .line2 {
   
            top: 120px;
        }

        .danmu-area .line3 {
   
            top: 180px;
        }

        .danmu-area .line .span {
   
            margin: 0 15px;
            padding: 0 10px;
            display