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

}

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

转载于:https://www.cnblogs.com/lijuntao/p/6478103.html