基于jquery的弹幕实现
前几天，需要做一个弹幕展示效果，看了网上很多资料，但是很不凑巧，都不能满足自己的需求和功能点，但是总不能放弃吧，那么就自己写一个，今天把成果分享给大家，首先说一下市面上比较流行的弹幕插件吧：
-
1.有关视频的弹幕 http://www.jq22.com/jquery-info2123
-
jquery.barrager.js
- 聊天弹幕 http://www.bootstrapmb.com/item/6429
当然网上也有很多插件，重点说一下我看的这三款，第一款如果不碰撞还可以，但是不适合vue，需要自己改造，第二个会出现一个问题，弹幕数量过多时整体会卡顿，不适合大型弹幕效果，需要大家限制一下加载的条数；
下面先把我的简单的demo呈现给大家：
样式部分：
.barrage_box{
position: absolute;
left:1080px;
top:170px;
background:rgba(208,70,91,0.56);
border:1px solid rgba(255,255,255,0.56);
border-radius: 30px;
padding:8px 24px;
line-height: 40px;
font-size:24px;
color:#fff;
white-space: nowrap;
}
这里需要注意一下，这个弹幕需要添加层级，因为内容是未知的，所以我们写的时候不要宽度写死，不然弹幕会出现超出的情况，这个添加了不许换行，除非br,这里的背景色和字体设置以及border、位置都可以先写死，后面做成活的，也就是我们面向对象思想中的options，或者插件的配置项；
下面是最简单的js
function barragers(text){
var $last = $('.barrage_box');
if($last.length>0){
var top = parseInt($($last[$last.length-1]).css('top'))=='NaN'?0:parseInt($($last[$last.length-1]).css('top'));
var right = parseInt($($last[$last.length-1]).css('left'))=='NaN'?0+$($last[$last.length-1]).width():parseInt($($last[$last.length-1]).css('left'))+$($last[$last.length-1]).width();
var id = new Date().getTime();
var str = '<div class="barrage_box" id="'+id+'">'+text+'</div>';
$('body').append(str);
var left= $('#'+id).width()+60;
if(left<right){
var tops= '';
var top1 = top+65
if(top1<280){
tops = top1
}
if(top1>280&&top1<840){
tops= 860
}
if(top1<1000&&top1>860){
tops = top1
}
$('#'+id).css('top',tops+'px');
$('#'+id).animate({left:'-'+left+'px'},24000,function(){
$(this).remove();
})
}
}else{
var id = new Date().getTime();
var str = '<div class="barrage_box" id="'+id+'">'+text+'</div>';
$('body').append(str);
var left= $('#'+id).width()+60;
$('#'+id).animate({left:'-'+left+'px'},24000,function(){
$(this).remove();
})
}
}
需要注意的是我们每一次添加一个弹幕消息，需要唯一一个id,这样可以保证我们每一次都是一个独有的元素，同时判断动画执行完毕后，我们删除当前的元素，这样不会添加非常多的dom，这里的tops如果需要随机，可以利用math.random去实现随机位置控制和判断，因为我项目对于位置有一定的要求，所以添加了判断。注意唯一id,使用了时间戳，其实我们的打包很多项目都会使用这个会修改文件名称或者版本号
可以自己修改一下这个就可以实现弹幕效果了
前几天，需要做一个弹幕展示效果，看了网上很多资料，但是很不凑巧，都不能满足自己的需求和功能点，但是总不能放弃吧，那么就自己写一个，今天把成果分享给大家，首先说一下市面上比较流行的弹幕插件吧：
-
1.有关视频的弹幕 http://www.jq22.com/jquery-info2123
-
jquery.barrager.js
- 聊天弹幕 http://www.bootstrapmb.com/item/6429
当然网上也有很多插件，重点说一下我看的这三款，第一款如果不碰撞还可以，但是不适合vue，需要自己改造，第二个会出现一个问题，弹幕数量过多时整体会卡顿，不适合大型弹幕效果，需要大家限制一下加载的条数；
下面先把我的简单的demo呈现给大家：
样式部分：
.barrage_box{
position: absolute;
left:1080px;
top:170px;
background:rgba(208,70,91,0.56);
border:1px solid rgba(255,255,255,0.56);
border-radius: 30px;
padding:8px 24px;
line-height: 40px;
font-size:24px;
color:#fff;
white-space: nowrap;
}
这里需要注意一下，这个弹幕需要添加层级，因为内容是未知的，所以我们写的时候不要宽度写死，不然弹幕会出现超出的情况，这个添加了不许换行，除非br,这里的背景色和字体设置以及border、位置都可以先写死，后面做成活的，也就是我们面向对象思想中的options，或者插件的配置项；
下面是最简单的js
function barragers(text){
var $last = $('.barrage_box');
if($last.length>0){
var top = parseInt($($last[$last.length-1]).css('top'))=='NaN'?0:parseInt($($last[$last.length-1]).css('top'));
var right = parseInt($($last[$last.length-1]).css('left'))=='NaN'?0+$($last[$last.length-1]).width():parseInt($($last[$last.length-1]).css('left'))+$($last[$last.length-1]).width();
var id = new Date().getTime();
var str = '<div class="barrage_box" id="'+id+'">'+text+'</div>';
$('body').append(str);
var left= $('#'+id).width()+60;
if(left<right){
var tops= '';
var top1 = top+65
if(top1<280){
tops = top1
}
if(top1>280&&top1<840){
tops= 860
}
if(top1<1000&&top1>860){
tops = top1
}
$('#'+id).css('top',tops+'px');
$('#'+id).animate({left:'-'+left+'px'},24000,function(){
$(this).remove();
})
}
}else{
var id = new Date().getTime();
var str = '<div class="barrage_box" id="'+id+'">'+text+'</div>';
$('body').append(str);
var left= $('#'+id).width()+60;
$('#'+id).animate({left:'-'+left+'px'},24000,function(){
$(this).remove();
})
}
}
需要注意的是我们每一次添加一个弹幕消息，需要唯一一个id,这样可以保证我们每一次都是一个独有的元素，同时判断动画执行完毕后，我们删除当前的元素，这样不会添加非常多的dom，这里的tops如果需要随机，可以利用math.random去实现随机位置控制和判断，因为我项目对于位置有一定的要求，所以添加了判断。注意唯一id,使用了时间戳，其实我们的打包很多项目都会使用这个会修改文件名称或者版本号
可以自己修改一下这个就可以实现弹幕效果了