0
哇哦，弹幕居然是这么弄出来的！一文学会如何用js制作一个弹幕效果
source link: https://blog.csdn.net/qq_32442973/article/details/119830919
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
随着b站的越做越强，出现了越来越多的仿照b站的视频站点。然而这些视频站仿照的最多的只有一点！那就是弹幕，现在也越来越多的人喜欢上了弹幕，甚至有人常说，‘正经人谁看视频啊，我是来看弹幕的🦉’，下面看下它的效果 ：
相信小伙伴们都看过了，那么它实现的原理是什么呢，那么我们前端怎么用我们web技术去实现呢？？
我们先新建一个html文件：
哈哈哈，大家别像我一样用中文命名。中文命名是不合规范的，行走江湖，带佬们看见你的中文命名会笑话你的。
上图中，我们引入了jquery插件，没错我们用jq写，回归原始（找不到cdn链接的小伙伴可以百度bootcdn，在里面搜索jquery）。并且取了个弹幕网的标题。
建好html文件，我们要搞出初始模版来。在这里不得不提一句，我推荐前端开发的小伙伴们用vscode来开发，很好用的。
一个小技巧：在空白html文件输入!会自动帮你初始化html模板
模板已经建立完毕，并且引入jquery后，正文开始了：
HTML添加
一段朴实无华的html。
再来写好css：
CSS填充
看看效果：
整体结构已经出来了，下面就是真二八经的js：
js逻辑代码
意外吗？就这么几行😓，哈哈哈。注释里写的很详细，小伙伴们可以好好看来看，这里我给大家演示演示：
请原谅我这糟糕的画质，还好不影响看效果，这里只是简单的实现了一个弹幕的效果，还不能够达到企业级的应用，有需求的也可以自行完善，道理就是这么个道理，嘿嘿。
如果企业级视频弹幕的话，这里也推荐dplayer播放器，一个非常完美的播放器。
以上关于前端弹幕的讨论就差不多到此了，如果有要和我吹水的，请看我的主页。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK