第一次发博客有点小紧脏。
事情开始于一周前,因为公司项目需要做一个弹幕展示的功能。室友给我推荐了一款弹幕 https://yaseng.org/jquery.barrager.js/ 插件。
网站代码说的很详细,但是,是基于PHP端后台做的,作为一个PHP文盲,真的很无力,但是还好,大致能了解写的什么。然后又遇上的JSON解析,有一次把自己文盲了。因为本盲一直使用的是XML(真的是发现了XML的难处了,之后会进一步学习JSON的!),所以后来决定使用自己在前端使用数组组装弹幕信息。
//弹幕的主要构成(实体类?原谅我不知道前端里面该怎么称呼)
var barrage ={
img:'static/heisenberg.png', //图片 用户可以自己更改。
info:'弹幕文字信息', //文字
close:true, //显示关闭按钮
speed:6, //延迟,单位秒,默认6
bottom:70, //距离底部高度,单位px,默认随机
color:'#fff', //颜色,默认白色
old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
}
弹幕终于出来了,可是,出现了弹幕之间的碰撞问题。
后来参考了 http://qiutianaimeili.com/html/page/2017/09/aa31smab4oi.html 这位大大的 “跑道”思路,对代码进行修改,从而解决了弹幕碰撞的问题。
function show_barrager(xml) {
var cont= ""; //弹幕内容
var imgurl = ""; //弹幕头像
var bm = "";
//每条弹幕发送间隔
var looper_time = "";
//这个是我自己加的,源码没有这个部分。可能是强迫症,觉得应该有一个变量就要声明一下。
var lopper = "";
//弹幕总数
var total =num;
//是否首次执行
var run_once = true;
//弹幕索引
var index = 0;
var items = new Array(num);
//获取了固定弹幕展示的区域。所以对控件中的JS进行了同样的修改,原本的js是获取整个浏览器的高度。
//首先将弹幕距离底部的高度修改,然后使用循环递归实现弹幕距离底部的高度改变。也是就将其安排在不同的跑道上
var bottom = $("#div_danmu").height();
//解析后台传来的XML
$(xml).find("info").each(function (i) {
cont= $(this).children("cont").text();
imgurl= $(this).children("imgurl").text();
if (imgurl == "") {
imgurl = "static/img/heisenberg.png";
}
if (bottom < 60) { //设置小于60px是因为弹幕js的弹幕框高度是40px,为了保证弹幕之间有间隔,所以设置了60
bottom = $("#div_danmu").height() - 60;
} else {
bottom = bottom - 60;
}
items[i] = { 'img': imgurl, 'info': cont,'bottom':bottom }
})
//每条弹幕发送间隔
looper_time = 1.2 * 1000;
//先执行一次
barrager();
function barrager() {
if (run_once) {
//如果是首次执行,则设置一个定时器,并且把首次执行置为false
looper = setInterval(barrager, looper_time);
run_once = false;
}
//发布一个弹幕
if (items[index]!=null) {
$('#div_danmu').barrager(items[index]);
//索引自增
index++;
}
//所有弹幕发布完毕,清除计时器。
if (index == total-1) {
clearInterval(looper);
return false;
}
}
}
弹幕插件jquery.barrager.js,可以实现基本的功能,但是,其还有许多可以优化的地方。比如:是弹幕不碰撞,将弹幕区域分为多条跑道,同一条跑道中两条相邻弹幕出现的延时等,都是可以得到优化的地方。
不知道是不是因为该插件是用于浏览器端的,在手机上使用时,有些字数过长的内容,内容上无法显示,这个是还需要我下去解读的。
最后由衷感谢该弹幕插件开发与给出“跑道”思想的大大。