朋友有项目需要做弹幕效果,在网上找了示例代码,然而运行起来有点问题(文字重叠+没有循环),就让我看下。由于本人比较不喜欢跟着别人思路走,因此干脆重新写了一个,基本实现弹幕功能,支持PC和移动端。具体功能如下:
- 支持指定弹幕行数
- 支持循环播放
- 支持弹幕开关
- 支持设置评论颜色(通过CSS支持,可改造成直接设置字体颜色)
- 支持设置弹幕透明度
效果如下:
使用方法很简单:
<script src="js/barrage.js"></script>
var barrage = new Barrage('.barrage-container', {
rows: 5, //display rows, default as 3
initialData: [{ //inital data if needed
id: 1,
text: 'hahaha',
color: '' // default