前言
就在最近这几年,弹幕这个东西慢慢地流行了起来。我们在网上看视频或者看直播都能见到弹幕的身影,有时候弹幕的内容甚至比视频本身内容还要精彩。本人也是很喜欢弹幕这个东西,看到精彩处刷个弹幕都是常事。正好最近也比较空闲,于是就自己写了一个Demo来展示一下弹幕效果的实现原理。不足之处,欢迎留言指教。
实现原理
项目结构
项目结构非常简单,非常标准的html+css+js的结构。这里我们用了第三方的jQuery库来帮助我们完成这个弹幕效果。如果有兴趣的话,可以尝试一下用原生js去实现这个功能,看完这篇文章相信你也可以轻轻松松地用原生js实现。
HTML和CSS文件内容
HTML
弹幕墙这里我们页面的布局非常简单,主要分为上下两个div:
div.screen_container作为我们的弹幕墙,这里将会放我们发射的弹幕内容。
div.screen_toolbar包含一个输入框用于输入我们需要发射的弹幕内容、一个发射按钮和一个关闭弹幕按钮。
另外就是引入第三方库以及我们自己的css和js。
CSS
.screen_container{
position: relative;
width: 600px;
height: 400px;
margin: 30px auto;
background: #000;
overflow: hidden;
}
.screen_toolbar{
width: 600px;
margin: 20px auto;
text-align: center;
}
CSS的来稍微美化一下我们的布局,这里不设置我们的弹幕的样式。
HTML+CSS效果图
JS实现
弹幕总体实现原理
弹幕的实现原理非常简单,我们点击”发射“按钮,就根据输入的弹幕的内容生成一个div插入div.screen_container中,并随机初始化我们生成的div的位置。这样我们的弹幕墙中就有一个我们自己生成的弹幕了,但是此时的弹幕还没有移动效果