移動端頁面彈幕小Demo實例說明

時間 2019-11-21

標籤移動頁面 demo 實例說明欄目無線简体版

原文原文鏈接

代碼地址以下：
http://www.demodashi.com/demo/11595.htmlcss

彈幕小Demo實例地址，點擊看效果html

寫在前面:嘗試作了一下彈幕的實例，歡迎提出並指正問題app

問題說明：

Demo中頁面展現以下圖所示：

若是圖片掛了，請看文字說明：this

簡單的說彈幕只完成了一個功能，從右向左緩慢移動lua

Demo中所涉及到的文字參數說明以下：spa

行走translateX= 屏幕寬度+彈幕寬度 + 70
行走時間：屏幕寬度/50（初始時間）+彈幕寬度/500
批次間隔時間：Math.min(初始時間/2，4200)
移除條件：left<-(70+20)

ps:以上數字爲自定的，無組織無規律,也可在對話框中設定更加無組織無紀律的數字，設定時請不要帶單位，並無作正則匹配~也沒有作兼容~code

未解決問題:

彈幕重疊問題：當彈幕不定長時，彈幕是按照必定時間經過setInterval來批次放出，而不是當前一個結束劃入屏幕以後，後一個再出現，若是能夠斷定當前何時在屏幕內滑到什麼位置，就能夠準確放出後一個彈幕，這樣避免了彈幕重疊，若是給彈幕設定長則可必定程度上避免重疊。
批次時間間隔設定問題：時間間隔設定較長，則避免長彈幕重疊，但短彈幕空白太大，時間間隔設定太短則長彈幕重疊，問題和上一個相似，如何在彈幕不定長時批次相隔緊湊且不重疊，這兩個遇到的問題目前都沒有解決orm

代碼說明:

/*
 *彈幕調用：Barrage.danMuInit(aqueue);
 *彈幕插入：Barrage.danMuInsert(aqueue,data);
 *aqueue=[{'img':xx,'content':xx}]   data={'img':xx,'content':xx}
 */
var config = {
        init_time:'',//屏幕內滑動時間
        interval_time:'',//批次間隔時間
        line:'',//彈幕分行
        liWidth:'',//彈幕限寬
    }
var Barrage = {
        left:document.documentElement.clientWidth,
        translateX:document.documentElement.clientWidth||0,
        fontSize:'12',
        color:'#000',
        line:'',//彈幕所分行數
        top:[],//彈幕分行時絕對定位top值
        init_time:'',//彈幕屏內滑動時間
        interval_time:'',//彈幕每批出現間距時間
        timeCacluate:'',//彈幕暫停
        liWidth:'',//強制設置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共同構成行走時間
            
            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('![]('+data[0].img+')');
                    arr.push('<span>'+data[0].content+'</span>');
                    arr.push('</li>');
                    //重複播放時數據填充
                    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);
        }
    };