基於jquery的彈幕實現

前幾天，需要做一個彈幕展示效果，看了網上很多資料，但是很不湊巧，都不能滿足自己的需求和功能點，但是總不能放棄吧，那么就自己寫一個，今天把成果分享給大家，首先說一下市面上比較流行的彈幕插件吧：

1. 1.有關視頻的彈幕 http://www.jq22.com/jquery-info2123

2. jquery.barrager.js

3. 聊天彈幕 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,使用了時間戳，其實我們的打包很多項目都會使用這個會修改文件名稱或者版本號

可以自己修改一下這個就可以實現彈幕效果了