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*.3+"rem")//定位 .html(user)//添加内容 .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>100){//50为间隔 为true则表示当前弹幕轨道上最后一条弹幕已经全部出现,则当前弹幕放在改轨道上 this.lastElem=i; this.overlapElem=-1; return true; } } } return false; } }