B2美化之评论弹幕气泡2022更新版

WordPress也有类似的评论弹幕插件，今天给大家分享的是纯代码实现WordPress网站评论弹幕气泡，以我正在使用的7B2主题为例（其他主题类似），经过更新修改，目前实现点击评论即可跳转对应文章。

效果图

教程

本教程在原文基础上新添：点击弹幕跳转文章评论界面

JS文件

在网站根目录新建一个danmu-qitablog.js文件，然后把下面的东西放进去，注意api地址需要修改成你自己网站的

/**
详细美化使用教程：https://www.xingkongweb.com/60281.html


更新时间 ：2018-04-03


**/
$.fn.barrage = function(opt) {
var _self = $(this);
var opts = { //默认参数
data: [], //数据列表
row: 5, //显示行数
time: 2500, //间隔时间
gap: 15, //每一个的间隙
direction: 'bottom right', //方向
ismoseoverclose: true, //悬浮是否停止
}
var settings = $.extend({}, opts, opt); //合并参数
var M = {},
Obj = {};
Obj.data = settings.data.data;
M.vertical = settings.direction.split(/s+/)[0]; //纵向
M.horizontal = settings.direction.split(/s+/)[1]; //横向
M.bgColors = ['#f79a3e', '#e66760', '#5382af', ' #aea79f', '#37b8af', '#008b5d', ' #f0b849', '#499df3',
' #5f6c72', ' #8c88cd'
]; //随机背景色数组
Obj.arrEle = []; //预计存储dom集合数组
M.barrageBox = $('<div id="Danmu""></div>'); //存所有弹幕的盒子
M.timer = null;
var createView = function() {
var randomIndex = Math.floor(Math.random() * M.bgColors.length);
var ele = $('<li class="overflow-text" style="opacity:0;text-align:' + settings.direction.split(/s+/)[
1] + ';float:' + settings.direction.split(/s+/)[1] + ';background-color:' + M.bgColors[
randomIndex] + '"; ><a class="img" target="_blank" href="' + (Obj.data[0].user.link ? Obj
.data[0].user.link : "javascript:;") + '"><img src="' + Obj.data[0].user.avatar +
'"width="40" height="40"></a><div class="xtw-dm-content"><a target="_blank" href="' + (Obj.data[0].post.link ? Obj
.data[0].post.link : "javascript:;") + '">' + Obj.data[0].content + '</a></div></li>');
var str = Obj.data.shift();
ele.animate({
'opacity': 1,
'margin-bottom': settings.gap
}, 1000)
M.barrageBox.append(ele);
Obj.data.push(str);
if (M.barrageBox.children()
.length > settings.row) {
M.barrageBox.children()
.eq(0)
.animate({
'opacity': 0,
}, 300, function() {
$(this)
.css({
'margin': 0,
})
.remove();
})
}
}
M.mouseClose = function() {
settings.ismoseoverclose && (function() {
M.barrageBox.mouseover(function() {
clearInterval(M.timer);
M.timer = null;
})
.mouseout(function() {
M.timer = setInterval(function() { //循环
createView();
}, settings.time)
})
})()
}
Obj.close = function() {
M.barrageBox.remove();
clearInterval(M.timer);
M.timer = null;
}
Obj.start = function() {
if (M.timer) return;
_self.append(M.barrageBox); //把弹幕盒子放到页面中
createView(); //创建试图并开始动画
M.timer = setInterval(function() { //循环
createView();
}, settings.time)
M.mouseClose();
}
return Obj;
}
$.ajax({
type: "POST",
data: {
count: 20, //获取的评论数量
paged: 1, //分页
},
url: 'https://www.xingkongweb.com/wp-json/b2/v1/getNewComments', //api地址
success: function(data) {
var Obj = $('body')
.barrage({
data: data,
//数据
row: 6,
//显示行数
time: 2500,
//时间
gap: 15,
//间隙
ismoseoverclose: true,
//悬浮是否停止
})
if ($('#Danmu')
.length == 0) {
Obj.start();
}
}
});

CSS样式文件

在网站根目录新建一个danmu.css文件，然后把下面文件的代码复制进去

文件下载在底部。

如果需要点击跳转文章功能，把下面的css代码放到上面下载的css文件底部即可

/*弹幕跳转功能-www.xingkongweb.com*/
.xtw-dm-content {
z-index: 999999;
}
.xtw-dm-content a {
pointer-events: auto;
}

手机端显示/隐藏

 /*需要显示手机端把此段删除即可-www.xingkongweb.com*/
@media (max-width: 780px) {
#Danmu {
right: 0;
bottom: 57px;
display: none;
}
}

引入js与css

在主题文件footer.php文件底部，</body>标签之前添加以下代码引用我们之间建立的js与css文件，注意两个文件的地址，这里写的是根目录

<link rel="stylesheet" href="/danmu-qitablog.css">
<script type="text/javascript" src="/danmu-qitablog.js"></script>

如果是子主题，则还需要引入jQuery，引用代码如下（jquery写死，https，绝对路径），在header.php，</head>标签之前引入

<!--B2主题-->
<script type="text/javascript" src="/jquery.js"></script>
<!--非B2主题-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>