👨💻一个原生js弹幕库
直接 cdn 引入
<script src="https://unpkg.com/js-bullets@latest/dist/BulletJs.min.js"></script>
<script>
// .screen 的 div 必须要有明确的宽高
const screen = new BulletJs('.screen', {});
screen.push('<span>12222222</span>')
</script>
ESModule 引入
yarn add js-bullets
// react
import BulletJs from "js-bullets";
componentDidMount() {
const screen = new BulletJs("#danmu-screen", {})
setInterval(() => {
screen.push('<span>12222222</span>')
}, 1000)
}
简单粗暴的办法直接拷贝 comps
目录下的代码到你的项目中使用,vue、react 项目均可
创建一个弹幕实例: const screen = new BulletJs(dom selector, Options);
发送弹幕: screen.pause('弹幕内容')
暂停弹幕: screen.pause([<bulletId>])
,无参则暂停全部
弹幕继续: screen.resume([<bulletId>])
,无参则继续全部
Options
选项 | 含义 | 值类型 | 默认值 | 备注 |
---|---|---|---|---|
trackHeight | 轨道高度 | string | 50px | 均分轨道的高度 |
onStart | 自定义动画开始函数 | function | null | 开始开始回调 |
onEnd | 自定义动画结束函数 | function | null | 弹幕运动结束回调 |
pauseOnClick | 鼠标点击暂停 | boolean | false | 再次点击继续 |
pauseOnHover | 鼠标悬停暂停 | boolean | true | 鼠标进入暂停,离开继续 |
speed | 滚动速度 | number | 100 | 100px/s 或 null 传入null 会根据 duration 参数自动控制速度,弹幕越长速度越快 |
trackArr | 控制每一轨道的速度 | {speed:number}[] |
undefined | 单独控制每一条轨道速度,数组索引对应轨道序号,如当前索引下无值则取 speed 参数的值 |
duration | 滚动时长 | string | 10s | 传入speed该参数无效 |
建议参数配置如下:
{
trackHeight: 35, // 每条轨道高度
speed: 100, // 速度 100px/s 根据实际情况去配置
pauseOnClick: true, // 点击暂停
pauseOnHover: true, // hover 暂停
}
innerHTML
来实现让开发者自定义样式,故有极大风险产生 XSS攻击
,所以开发者在接收用户发出的弹幕时一定要对输入内容做转义
// 转义示例代码 https://stackoverflow.com/questions/30661497/xss-prevention-and-innerhtml
function escapeHTML(unsafe_str) {
return unsafe_str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\"/g, '"')
.replace(/\'/g, ''')
.replace(/\//g, '/')
}
css3 animation 关键帧动画
, 从左移动到右,duration
控制速度
@keyframe name {
from {
transform: translateX(width px);
}
to {
transform: translateX(-100%);
}
}
rc-bullets
是基于 React
,可能很多使用其他框架的同学没法使用speed
参数,让所有弹幕以相同速度运动(自己项目的需要)animationEnd
的时候增加了轨道置空处理queues
队列的处理方式不同dom 字符串
,方便使用者自定义弹幕样式appendChild
代替replaceChildren
解决移动端低版本浏览器的兼容问题isAllPaused
标志,当全部暂停后不会再有 push 或是 render ,resume
之后即可恢复切记:不可覆盖内部样式类 __bullet-item-style
否则可能会出现弹幕重叠问题.d.ts
文件IntersectionObserver
来对弹道进行调度,采用新的弹道选择算法,增加防重叠检测this.screen.push(danmu, {}, true)
(适用于用户自己发的弹幕,需要将第三个参数传为true
)