基于jquery的弹幕实现

时间:2019-12-14 星光笔人气:0

前几天，需要做一个弹幕展示效果，看了网上很多资料，但是很不凑巧，都不能满足自己的需求和功能点，但是总不能放弃吧，那么就自己写一个，今天把成果分享给大家，首先说一下市面上比较流行的弹幕插件吧：

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,使用了时间戳，其实我们的打包很多项目都会使用这个会修改文件名称或者版本号

可以自己修改一下这个就可以实现弹幕效果了

加载全部内容

基于jquery的弹幕实现

1.有关视频的弹幕 http://www.jq22.com/jquery-info2123

jquery.barrager.js