网上无意中看到一段优秀的弹幕代码，做了一个H5弹幕

预览地址：戳这里

弹幕

var mybarrage = (function($) {

return {

create: function(config){

var style = '';

style += config.area.left ? ('left:'+ config.area.left+'px;'):'';

//style += config.area.right ? ('right:'+ config.area.right+'px;'):'';

//style += config.area.top ? ('top:'+ config.area.top+';'):'';

//style += 'bottom:'+ config.area.bottomNum +'%;';

$("#con").append('

//new一个弹幕管理器

var manage = new mybarrage.init.BarrageManager();

manage.load();

},

init: function(){

var json = [

{ id: 2, fromUserName: '李寻欢', content: "梨花剑", fromUserIcon: "https://www.baidu.com/favicon.ico" },

{ id: 3, fromUserName: '黄药师', content: "轻功", fromUserIcon: "https://www.baidu.com/favicon.ico" },

{ id: 4, fromUserName: '周杰伦', content: "唱歌", fromUserIcon: "https://www.baidu.com/favicon.ico" },

{ id: 5, fromUserName: '洪金宝', content: "功夫", fromUserIcon: "https://www.baidu.com/favicon.ico" }

]

//弹幕管理器

function BarrageManager (options) {

this.opts = {

url : [],

loadDelay : 5000 , // 轮询时间间隔

}

$.extend( this.opts , options);

//new一个弹幕队列集合

this.bc = new BarrageCollection();

}

//弹幕管理器加载数据

BarrageManager.prototype.load = function (data) {

var self = this ;

if(data == null){

data = self.opts.url;

}

for(var i = 0 ; i < data.length ; i++) {

//所有初始数据转化成弹幕对象，放进弹幕队列集合中

self.bc.add(new Barrage({

id:data[i].id,

name:data[i].fromUserName,

text:data[i].content,

icon:data[i].fromUserIcon

}));

}

//弹幕管理器开始工作

self.loop();

}

// 弹幕管理器工作

BarrageManager.prototype.loop = function () {

var len = this.bc.mq.length , self = this ;

while (len--) {

// 弹幕队列集合

this.bc.mq[len].start(this.bc , len);

}

// setTimeout(function () {

// self.load();

// } , this.opts.loadDelay);

}

function BarrageCollection () {

this.mq = [] ;

}

BarrageCollection.prototype.add = function (barrage) {

this.mq.push(barrage);

}

//弹幕队列集合删除弹幕

BarrageCollection.prototype.remove = function (barrage) {

var index = this.mq.findIndex(function (item) {

return barrage.opts.id == item.opts.id ;

});

if(index != -1) {

this.mq.splice(index , 1);

}

barrage.opts.$el.remove();

}

function Barrage (options) {

this.opts = {

$el : null ,

left : 0 ,

bgColor : [Math.floor(Math.random()*255),Math.floor(Math.random()*255),Math.floor(Math.random()*255)] ,

offset : 1000 , // 使弹幕完全移出屏幕外

duration : 10000 , // 弹幕从右往左移动的时间

delayTime : 1000 , // 弹幕延迟移动时间

};

$.extend( this.opts , options);

this.init();

}

Barrage.prototype.init = function () {

//this.opts.$el = $(""+this.opts.name+":"+this.opts.text+"");

this.opts.$el = $(""+this.opts.text+"");

var top = Math.ceil(Math.random() * 10 );

this.opts.$el.css({

top:top * 40 +'px',

//backgroundColor:"rgb("+this.opts.bgColor.join(",")+")",

color:"rgb("+this.opts.bgColor.join(",")+")",

//right:0,

position:'absolute'

});

var delay = Math.ceil(Math.random()*10);

this.opts.delayTime *= Math.abs(delay - 5);

//var dur = Math.ceil(Math.random() * 10);

// this.opts.duration += dur * 1000 ;

$('#barrage-wrapper').append(this.opts.$el);

this.opts.left = -this.opts.$el.width() - this.opts.offset ;

}

//弹幕开始移动

Barrage.prototype.start = function (bc , index) {

var self = this ;

setTimeout(function () {

self.move(bc);

}, this.opts.delayTime);

}

//弹幕移动

Barrage.prototype.move = function (bc) {

var self = this ;

// 弹幕队列集合删除这个弹幕

this.opts.$el.animate({left:'-150%'},this.opts.duration ,"linear", function () { bc.remove(self);});

}

return {

BarrageManager: BarrageManager,

BarrageCollection: BarrageCollection,

Barrage: Barrage

}

}()

}

})($)

var width = document.documentElement.offsetWidth || document.documentElement.offsetWidth||window.innerWidth

var BarrageManager = mybarrage.init.BarrageManager;

var Barrage = mybarrage.init.Barrage;

function submit(){

let text = $('#custmerEnter').val();

let manage = new BarrageManager();

manage.load();

manage.bc.add(new Barrage({

id: +new Date(),

name: '张三风',

text: text,

icon: 'https://pic4.zhimg.com/da8e974dc_xs.jpg'

}));

manage.loop();

}

mybarrage.create({

area:{

left: width,

//right: -10,

top: '5%'

}

})

提交