php 文字弹幕效果代码,50行代码搞定弹幕效果

前言

就在最近这几年，弹幕这个东西慢慢地流行了起来。我们在网上看视频或者看直播都能见到弹幕的身影，有时候弹幕的内容甚至比视频本身内容还要精彩。本人也是很喜欢弹幕这个东西，看到精彩处刷个弹幕都是常事。正好最近也比较空闲,于是就自己写了一个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的位置。这样我们的弹幕墙中就有一个我们自己生成的弹幕了，但是此时的弹幕还没有移动效果