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))
　　}

}

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