前言

之前写了一个简单的留言板弹幕功能:给你的留言板添加一个弹幕吧,20天过去了,越看越觉得不够高端大气上档次,于是就重新找了一个弹幕项目写一下。
项目地址:jquery.barrager.js 专业的网页弹幕插件
看名字就知道,我们需要引入jq,不过问题不大,我们只是单页引入。

与老版对比

对比内容 新版本 老版本
显示区域 全屏 小块
显示内容 全站评论 单页评论
额外功能 可跳转到评论所在页面

教程

教程很简单,因为我把css和js全写在了页面内。
只需要在留言板页面插入如下代码即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/yaseng/jquery.barrager.js/dist/js/jquery.barrager.min.js"></script>
<style>
/* 评论弹幕 */
.barrage {
position: fixed;
right: -500px;
display: inline-block;
width: fit-content;
z-index: 99
}
.barrage_box {
display: flex;
background-color: rgba(0, 0, 0, .5);
padding-right: 8px;
height: 40px;
border-radius: 25px;
}
.barrage_box .portrait {
display: inline-block;
margin-top: 4px;
margin-left: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
}
.barrage_box .portrait img {
width: 100%;
height: 100%;
}
.barrage_box div.p a {
display: inline-block;
white-space: nowrap;
max-width: 25rem;
margin-right: 2px;
font-size: 14px;
line-height: 40px;
margin-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
.barrage_box div.p a:hover {
text-decoration: underline;
}
</style>

书写markdown区域

<div id="loading"></div>

<script>
let ls = []
let Num = 0;

// 以下注释为twikoo api的返回格式
// 返回 Array,包含最新评论的
// * id: 评论 ID
// * url: 评论地址
// * nick: 昵称
// * mailMd5: 邮箱的 MD5 值,可用于展示头像
// * link: 网址
// * comment: HTML 格式的评论内容
// * commentText: 纯文本格式的评论内容
// * created: 评论时间,格式为毫秒级时间戳
// * avatar: 头像地址(0.2.9 新增)
// * relativeTime: 相对评论时间,如 “1 小时前”(0.2.9 新增)
// 返回示例: [ // 从新到旧顺序
// { id: '', url: '', nick: '', mailMd5: '', link: '', comment: '', commentText: '', created: 0 },
// { id: '', url: '', nick: '', mailMd5: '', link: '', comment: '', commentText: '', created: 0 },
// { id: '', url: '', nick: '', mailMd5: '', link: '', comment: '', commentText: '', created: 0 }
// ]
window.onload = () => {
// 手机端显示效果不好,所以直接不让其显示
if (1&&document.body.clientWidth > 768) {
// 加载动画,将 /img/loading.svg 换成你的加载图片即可
document.getElementById('loading').innerHTML = '<a href="/img/loading.svg" data-fancybox="gallery" data-caption="弹幕加载中..." data-thumb="/img/loading.svg"><img src="/img/loading.svg" data-lazy-src="/img/loading.svg" alt="弹幕加载中..." data-ll-status="loaded" class="entered loaded"></a><div class="img-alt is-center">弹幕加载中...</div>';
let barrageTime = ''
// 使用twikoo 自带api请求全站数据
twikoo.getRecentComments({
envId: 'https://twikoo.leonus.cn/', // 环境 ID
// region: 'ap-guangzhou', // 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
pageSize: 50, // 获取多少条,默认:10,最大:100
includeReply: false // 是否包括最新回复,默认:false
}).then((data) => {
data.forEach(i => {
if (i.avatar == undefined) i.avatar = 'https://cravatar.cn/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp'
ls.push({
img: i.avatar, //图片
info: i.nick + ':' + formatDanmaku(i.comment), //文字
href: i.url, //链接
close: false, //显示关闭按钮
speed: 15, //延迟,单位秒,默认6
// bottom: 70, //距离底部高度,单位px,默认随机
color: '#fff', //颜色,默认白色
old_ie_color: '#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
})
});
setTimeout(() => { document.getElementById('loading').innerHTML = ''; }, 2000);
setInterval(() => {
if (Num >= ls.length) Num = 0
$('body').barrager(ls[Num]);
Num++;
}, 1000); // 弹幕间隔时长
}).catch(function(err) { console.error(err); });
}else document.getElementById('loading').innerHTML = '<div class="note danger flat"><p>已关闭弹幕功能,请在电脑上查看。</p></div>' // 如果是手机则提醒
}

// 格式化评论
function formatDanmaku(str) {
str = str.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, '');
str = str.replace(/<img.*?>/g, '[图片]');
str = str.replace(/<a.*?>.*?<\/a>/g, '[链接]');
str = str.replace(/<pre.*?>.*?<\/pre>/g, '[代码块]');
str = str.replace(/<.*?>/g, '');
return str
}
</script>

后记

这个插件有加速和减速的动画,当鼠标悬停再离开时弹幕速度会从0开始。
然后我就发现了一个好玩的:鼠标来回滑动让弹幕悬停,一直攒弹幕,就像下图一样。
emmmmm…..也算一个小游戏了,要善于发现身边有趣的事情嘛

攒弹幕“小游戏”