98 lines
4.7 KiB
JavaScript
98 lines
4.7 KiB
JavaScript
var barrageWall={
|
||
container:null,//容器选择器
|
||
barrageLen:null,//弹幕的条数
|
||
lastElem:0,//弹幕出现的位置
|
||
overlapElem:-1,//如果大于0则表示每条弹幕轨道上都有弹幕未全部出现，需要重叠定位在弹幕轨道上
|
||
barrage:[],//弹幕墙
|
||
barrageOffset:[],//弹幕墙上最后一条弹幕的偏移量
|
||
init:function(option){
|
||
if(option.container===undefined){
|
||
console.error("必须指定 container 属性，container为弹幕容器的选择器");
|
||
return false;
|
||
}
|
||
if(option.barrageLen===undefined){
|
||
console.error("必须指定 barrageLen 属性，barrageLen为弹幕轨道的数");
|
||
return false;
|
||
}
|
||
this.container=option.container;
|
||
this.barrageLen=option.barrageLen;
|
||
|
||
for(var i=0;i<this.barrageLen;i++){//建立弹幕墙，此处的循环次数为当前页面运行的弹幕行数
|
||
this.barrage[i]=new Array();
|
||
}
|
||
},
|
||
upWall:function(img,user,txt){//弹幕上墙
|
||
if(!this.barrageLen&&this.container){
|
||
console.error("未检测到container和barrageLen属性，请先初始化弹幕墙并指定container和barrageLen属性");
|
||
return false;
|
||
}
|
||
|
||
this.positionWall();//从上至下找出每条弹幕轨道上最后一条弹幕移动的位置
|
||
|
||
var elem = $('<div></div>')//创建元素
|
||
.addClass('list')//添加样式
|
||
.css("top",this.lastElem*38+"px")//定位
|
||
// .html("<img src='"+img+"' alt=''/>"+user+"："+txt)//添加内容
|
||
.html("<img src='"+img+"' alt=''/>"+user+txt)//添加内容
|
||
.appendTo(this.container);//追加在父元素后面
|
||
|
||
this.barrage[this.lastElem].push(elem);//追加在数组中
|
||
|
||
setTimeout(function(){//200ms防止元素动画不执行
|
||
elem.addClass("animate");
|
||
},200);
|
||
|
||
setTimeout(function(){//25s后动画执行完毕，从数组和页面中移除
|
||
for(var i=0;i<this.barrage.length;i++){
|
||
for(var x=0;x<this.barrage[i].length;x++){
|
||
if(this.barrage[i][x]===elem){
|
||
this.barrage[i].splice(x,1);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
elem.remove();
|
||
}.bind(this),25000);
|
||
},
|
||
positionWall: function () {
|
||
for(var i=0;i<=this.barrage.length;i++){//从上至下找出每条弹幕轨道上最后一条弹幕移动的位置
|
||
if(i===this.barrage.length){//每条弹幕轨道上都有弹幕未全部出现的情况
|
||
this.minOffset();//弹幕墙上所有的位置都有弹幕且都未出现完毕时，找出他们当中完全最先的那个
|
||
}else{//若有某个最后一条弹幕已经全部出现
|
||
if(this.afterOffset(i))break;//找到弹幕出现的位置，找到则退出循环
|
||
}
|
||
}
|
||
},
|
||
minOffset: function (){//找出所有弹幕轨道上最后一个弹幕中最先出现的那个（偏移量减去自身宽度）
|
||
var minOffset=0;
|
||
for(var x=0;x<this.barrage.length;x++){
|
||
var elem=this.barrage[x][this.barrage[x].length-1];//获取当前弹幕轨道上最后一条弹幕
|
||
var aboveWidth=elem.width();//获取它的宽度
|
||
var matrix=elem.css('transform');//获取它的矩阵值
|
||
this.barrageOffset[x]=matrix==="none"?-aboveWidth:-parseInt(matrix.split(",")[4])-aboveWidth;//matrix为none则弹幕translateX为0
|
||
minOffset=this.barrageOffset[x] > this.barrageOffset[minOffset]?x:minOffset;//找到最先出现的弹幕
|
||
}
|
||
this.lastElem=minOffset;
|
||
},
|
||
afterOffset: function (i){//找到弹幕出现的位置
|
||
if(this.barrage[i].length===0){//为true则表示当前弹幕轨道没有弹幕，则当前弹幕放在改轨道上
|
||
this.lastElem=i;
|
||
this.overlapElem=-1;
|
||
return true;
|
||
}else{//当前弹幕轨道上有弹幕
|
||
var elem=this.barrage[i][this.barrage[i].length-1];//获取当前弹幕轨道上最后一条弹幕
|
||
var aboveWidth=elem.width();//获取它的宽度
|
||
var matrix=elem.css('transform');//获取它的矩阵值
|
||
if(matrix!=="none"){
|
||
var aboveTransform=parseInt(matrix.split(",")[4]);//取出最后一条弹幕的矩阵值中X轴的偏移量，即translateX
|
||
if(-aboveTransform-aboveWidth>50){//50为间隔 为true则表示当前弹幕轨道上最后一条弹幕已经全部出现，则当前弹幕放在改轨道上
|
||
this.lastElem=i;
|
||
this.overlapElem=-1;
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
}
|