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

}

整体思路就是须要先添加一条弹幕到文档中，完了再让他动起来完成动画效果,就这么简单；