Demo example of mobile page barrage demo

Write in front: try to do some examples of the barrage, welcome to ask and correct the problem

Problem description: The
page display in the Demo is shown in the figure below:

If the picture hangs, please read the text description:

Simply put, the barrage only completed one function, moving slowly from right to left

The description of the text parameters involved in the Demo is as follows:

Walking translateX = screen width + barrage width + 70
walking time: screen width / 50 (initial time) + barrage width / 500
batch interval time: Math.min (initial time / 2, 4200)
removal conditions: left < -(70 + 20)
ps: The above numbers are self-defined, unorganized and irregular. You can also set more unorganized and undisciplined numbers in the dialog box. Please do not bring units when setting, and do not do regular matching ~ There is no compatibility ~

Unresolved problem:
Barrage overlap problem: When the barrage is not fixed , the barrage is released in batches through setInterval according to a certain time, rather than after the current one is drawn into the screen and the latter one reappears. Wherever you slide within the screen, you can accurately release the next barrage, which avoids the overlap of the barrage. If you set the barrage long, you can avoid the overlap to a certain extent.
Batch time interval setting problem: long time interval is set to avoid long barrage overlap, but the short barrage is too large, and the short interval is too long to overlap the long barrage. The problem is similar to the previous one. When the barrage is indefinite, the batches are closely spaced and do not overlap. Both of the problems encountered have not yet been resolved.
Code description:
""
/ *
* Barrage call: Barrage.danMuInit (aqueue);
* Barrage insertion: Barrage. danMuInsert (aqueue, data);
* aqueue = [{'img': xx, 'content': xx}] data = {'img': xx, 'content': xx}
* /
var config = {
init_time: ", // Intra-screen sliding time
interval_time: ", // Batch interval time
line:", // Barrage branch
liWidth: ", // Barrage limit width
}
var Barrage = {
left: document.documentElement.clientWidth,
translateX: document.documentElement.clientWidth || 0,
fontSize: '12 ',
color: '# 000',
line: ", // The number of lines divided by the
barrage top: [], // The absolute positioning of the top value when the barrage branches
init_time:", // The sliding time in the barrage screen
interval_time: ", / / The time interval between each batch of barrage
timeCacluate: ", // The barrage pause
liWidth:", // Force setting 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> ' );
                 // data filling repeat playback 
                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 ; // This li is used to store A width of 
            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);
    }
};

Running effect chart