h5做直播的彈幕效果

最近在搞彈幕效果所以就寫一個關於彈幕的吧，剛開始尋思去網上找插件的，但找的插件和我的需求都不太相符，其實做彈幕我知道的有兩種方法：

1：一種是用canvas和對象來完成彈幕想過，用canvas來完成彈幕動畫，每一條彈幕就是一個對象，但是由於canvas定位到視頻框上面，會覆蓋掉直播框，這樣就會讓我的直播框的一些事件失效所以我就用了下面的一種；

2：另外一種就是用DOM操作去完成彈幕效果，每當你接受到后台數據需要你發送一條彈幕時候就去用DOM操作動態創建一個div然后給他一個定時器去完成彈幕動畫效果，當然有很多完成動畫效果的方法，例如jquery里面的animate，css3動畫啦都是方法，我就不一一細說了。

下面直接貼我寫彈幕的方法吧：

 

//隨機數
function rand(min, max) {
　　return parseInt(Math.random() * (max - min) + 1) + min;
}

//彈幕
function danmu(str){
　　var _top = rand(0,18);
　　var danmuobj = $('<div style="position: absolute;height:1.2rem; font-size: 1.1rem;z-index: 10;overflow: hidden; white-space: nowrap;">'+str+'</div>')
　　danmuobj.css({"left":$(window).width()+"5rem"})
　　danmuobj.css({color:getReandomColor()})
　　$("#body").append(danmuobj);
　　var num = $(window).width();
　　setInterval(function(){
　　　　num--;
　　　　if (num<0) {
　　　　num=$(window).width();
　　　　}
　　　　danmuobj.css({left:num,top:_top+"rem"});
　　},20)

//隨機顏色

　　function getReandomColor(){
　　　　return '#'+(function(h){
　　　　return new Array(7-h.length).join("0")+h
　　　　})((Math.random()*0x1000000<<0).toString(16))
　　}

}

總體思路就是需要先添加一條彈幕到文檔中，完了再讓他動起來完成動畫效果,就這么簡單；