寫在前面:嘗試做了一下彈幕的實例菩收，歡迎提出并指正問題
問題說明：
Demo中頁面展示如下圖所示：
Demo圖片
如果圖片掛了赂蠢，請看文字說明：
簡單的說彈幕只完成了一個功能，從右向左緩慢移動
Demo中所涉及到的文字參數(shù)說明如下：
- 行走translateX= 屏幕寬度+彈幕寬度 + 70
- 行走時間：屏幕寬度/50（初始時間）+彈幕寬度/500
- 批次間隔時間：Math.min(初始時間/2悼瓮，4200)
- 移除條件：left<-(70+20)
ps:以上數(shù)字為自定的，無組織無規(guī)律,也可在對話框中設(shè)定更加無組織無紀(jì)律的數(shù)字重罪，設(shè)定時請不要帶單位毕匀，并沒有做正則匹配也沒有做兼容
未解決問題:
- 彈幕重疊問題：當(dāng)彈幕不定長時，彈幕是按照一定時間通過
setInterval來批次放出惕鼓，而不是當(dāng)前一個結(jié)束劃入屏幕之后，后一個再出現(xiàn)唐础，如果可以判定當(dāng)前什么時候在屏幕內(nèi)滑到什么位置箱歧，就可以準(zhǔn)確放出后一個彈幕，這樣避免了彈幕重疊一膨，如果給彈幕設(shè)定長則可一定程度上避免重疊呀邢。 - 批次時間間隔設(shè)定問題：時間間隔設(shè)定較長，則避免長彈幕重疊豹绪，但短彈幕空白太大价淌，時間間隔設(shè)定過短則長彈幕重疊，問題和上一個類似瞒津，如何在彈幕不定長時批次相隔緊湊且不重疊蝉衣，這兩個遇到的問題目前都沒有解決
代碼說明:
/*
*彈幕調(diào)用：Barrage.danMuInit(aqueue);
*彈幕插入：Barrage.danMuInsert(aqueue,data);
*aqueue=[{'img':xx,'content':xx}] data={'img':xx,'content':xx}
*/
var config = {
init_time:'',//屏幕內(nèi)滑動時間
interval_time:'',//批次間隔時間
line:'',//彈幕分行
liWidth:'',//彈幕限寬
}
var Barrage = {
left:document.documentElement.clientWidth,
translateX:document.documentElement.clientWidth||0,
fontSize:'12',
color:'#000',
line:'',//彈幕所分行數(shù)
top:[],//彈幕分行時絕對定位top值
init_time:'',//彈幕屏內(nèi)滑動時間
interval_time:'',//彈幕每批出現(xiàn)間距時間
timeCacluate:'',//彈幕暫停
liWidth:'',//強(qiáng)制設(shè)置liwidth
danMuInit:function(data){
var self = this;
self.top = [];
self.line = parseInt(config.line)||3;
self.init_time = parseInt(config.init_time)||document.documentElement.clientWidth/50;
self.interval_time = parseInt(config.interval_time)||Math.min(self.init_time*1000/2,4200);
for(var i = 0 ;i < self.line;i++){
self.top.push(''+i*30+'px');
};
self.liWidth = parseInt(config.liWidth);
self.danMuPlay(aqueue);
},
danMuPlay:function(data){
if(typeof(data)=='underined'){return;}
var self = this;
var strLength = 0;
var strWidth = 0;
var add_time = 0;//與init_time共同構(gòu)成行走時間
self.timeCacluate = setInterval(function(){
var arr = [];
for(var x = 0;x<self.top.length&&data.length > 0;x++){
arr.push('<li data-type="'+data[0].type+'" data-mid="'+data[0].source_id+'" style="position: absolute;left:'+self.left+'px;top:'+self.top[x]+';display: inline-block;white-space: pre;">');
arr.push('');
arr.push('<span>'+data[0].content+'</span>');
arr.push('</li>');
//重復(fù)播放時數(shù)據(jù)填充
var t = data.shift();
bqueue.push(t);
};
$('.j_barrage').find('ul').append(arr.join(''));
$('.j_barrage').find('ul span').css('width',''+self.liWidth+'px');
var liWidth = 0;//此li用于非定寬時存儲每個li寬度
var liLength = $('.j_barrage').find('ul').children().length;
for(var j = 0;j < liLength;){
for(k = 0;k<self.top.length&&j < liLength;k++){
liWidth = $('.j_barrage').find('li').eq(j).width();
add_time = liWidth/500;
$('.j_barrage').find('li').eq(j).css({
'transform':'translateX(-'+(self.left+liWidth+70)+'px)',
'left':''+self.left+'px' ,
'transition':'transform '+(self.init_time+add_time)+'s linear'
});
j++;
}
}
if(data.length == 0){
self.danMuPause();
}
},self.interval_time)
self.danMuClear();
},
danMuInsert:function(queue,data){
var self = this;
var img = 'http://tva1.sinaimg.cn/default/images/default_avatar_male_50.gif';
setTimeout(function(){
queue.unshift({'img':img,'content':data.content});
if(queue.data == ''){
self.danMuPlay(queue);
}
},2000);
},
danMuClear:function(){
var clearLi = setInterval(function(){
for(var i = 0;i<$('.j_barrage').find('ul').children().length;i++){
if($('.j_barrage').find('ul').children().eq(i).offset().left<-90){
console.log('remove')
$('.j_barrage').find('ul').children().eq(i).remove();
}
}
},1000)
},
danMuPause:function(){
var self = this;
clearInterval(self.timeCacluate);
}
};
ps：彈幕后場區(qū)……寫錯字了（彈幕候場區(qū)）……
