写在前面:尝试做了一下弹幕的实例，欢迎提出并指正问题

问题说明：

Demo中页面展示如下图所示：

Demo图片

如果图片挂了，请看文字说明：

简单的说弹幕只完成了一个功能，从右向左缓慢移动

Demo中所涉及到的文字参数说明如下：

• 行走translateX=  屏幕宽度+弹幕宽度 + 70

• 行走时间：屏幕宽度/50（初始时间）+弹幕宽度/500

• 批次间隔时间：Math.min(初始时间/2，4200)

• 移除条件：left

ps:以上数字为自定的，无组织无规律,也可在对话框中设定更加无组织无纪律的数字，设定时请不要带单位，并没有做正则匹配_{也没有做兼容}

未解决问题:

• 弹幕重叠问题：当弹幕不定长时，弹幕是按照一定时间通过setInterval来批次放出，而不是当前一个结束划入屏幕之后，后一个再出现，如果可以判定当前什么时候在屏幕内滑到什么位置，就可以准确放出后一个弹幕，这样避免了弹幕重叠，如果给弹幕设定长则可一定程度上避免重叠。

• 批次时间间隔设定问题：时间间隔设定较长，则避免长弹幕重叠，但短弹幕空白太大，时间间隔设定过短则长弹幕重叠，问题和上一个类似，如何在弹幕不定长时批次相隔紧凑且不重叠，这两个遇到的问题目前都没有解决

代码说明:

/*
 *弹幕调用：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  0;x++){                    
                    arr.push('

');                     arr.push('');                     arr.push(''+data[0].content+'');                     arr.push('

');                    //重复播放时数据填充                     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 

ps：弹幕后场区……写错字了（弹幕候场区）……

作者：进击的程序茗
链接：https://www.jianshu.com/p/6199e06ccdc5