弹幕

作者：娇娇jojo

日期：2018年6月21日

一、简介

做过好几次关于弹幕的需求，尝试过自己去写，但精力不够，没法写的特别好，于是在网上找到一个还挺专业的弹幕插件，移动端和PC端都适用。首先它提供了很多可以修改的参数，是否要图片、点击是否可跳转、是否显示关闭按钮、延迟时间、颜色、IE兼容等，其次如果你想针对不同项目调节样式，都可以直接对源码进行修改（悄咪咪的把 css 和 js 的源码下载下来随便改）。

弹幕的基本样式如下图所示：

二、使用

1、下载：

https://github.com/yaseng/jquery.barrager.js/archive/master.zip

建议大家去下载1.1版本的。

2、github

https://github.com/yaseng/jquery.barrager.js

3、发布弹幕

弹幕文字必选,图片,链接为空则不显示,其他的可选项有默认值,弹幕具体配置如下代码。

var item={   
    img:'static/heisenberg.png', //图片    
    info:'弹幕文字信息', //文字    
    href:'http://www.yaseng.org', //链接    
    close:true, //显示关闭按钮    
    speed:6, //延迟,单位秒,默认6    
    bottom:70, //距离底部高度,单位px,默认随机    
    color:'#fff', //颜色,默认白色    
    old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色  
}
$('body').barrager(item);

4、清除所有弹幕

$.fn.barrager.removeAll();

5、兼容低版本ie

ie 浏览器小于9不兼容css 圆角,采用兼容样式,可单独设置弹幕的颜色,属性为old_ie_color,建议不要与网页主背景色相同。 兼容模式如图：

三、集成

1、发布弹幕

通用后端

读取服务端有两种模式,适应于不同的场景 
1. 实时读取,隔x秒请求一次接口,获取一条弹幕,发送。 
2. 一次读取完毕,隔x秒发送一条弹幕。
第一种模式示范代码
server 端(php)

<!--?php //数组里面可以自定义弹幕的所有属性。
$barrages=array(    
    array(        
        'info'   =--> '第一条弹幕',        
        'img'    => 'static/img/heisenberg.png',        
        'href'   => 'http://www.yaseng.org',         
    ),    
    array(        
        'info'   => '第二条弹幕',        
        'img'    => 'static/img/yaseng.png',       
        'href'   => 'http://www.yaseng.org',        
        'color'  =>  '#ff6600'         
    ),    
    array(        
        'info'   => '第三条弹幕',        
        'img'    => 'static/img/mj.gif',        
        'href'   => 'http://www.yaseng.org',        
        'bottom' => 70 ,         
    ),    
    array(        
        'info'   => '第四条弹幕',        
        'href'   => 'http://www.yaseng.org',        
        'close'  =>false,         
    ),     
);     
//随机输出一个 
echo  json_encode($barrages[array_rand($barrages)]);

浏览器端获取json 弹幕数据,setInterval 调用,如有弹幕,就显示。
代码如下：

//每条弹幕发送间隔
var looper_time=3*1000;

//是否首次执行
var run_once=true;do_barrager(); 

function do_barrager(){  
    if(run_once){      
        //如果是首次执行,则设置一个定时器,并且把首次执行置为false      
        looper=setInterval(do_barrager,looper_time);                      
        run_once=false;  
    }  
    
    //获取  
    $.getJSON('server.php?mode=1',function(data){
        //是否有数据      
        if(data.info){            
            $('body').barrager(data);      
        }   
    });
}

第二种模式示范代码。 
server 端 (php)：

//数组里面可以自定义弹幕的所有属性。
$barrages=array(    
    array(        
        'info'   => '第一条弹幕',        
        'img'    => 'static/img/heisenberg.png',        
        'href'   => 'http://www.yaseng.org',         
    ),    
    array(        
        'info'   => '第二条弹幕',        
        'img'    => 'static/img/yaseng.png',        
        'href'   => 'http://www.yaseng.org',        
        'color'  =>  '#ff6600'         
    ),    
    array(        
        'info'   => '第三条弹幕',        
        'img'    => 'static/img/mj.gif',        
        'href'   => 'http://www.yaseng.org',        
        'bottom' => 70 ,         
    ),    
    array(        
        'info'   => '第四条弹幕',        
        'href'   => 'http://www.yaseng.org',       
        'close'  =>false,         
    ) 
);  
echo   json_encode($barrages);

浏览器端：

$.ajaxSettings.async = false;
$.getJSON('server.php?mode=2',function(data){
    //每条弹幕发送间隔
    var looper_time=3*1000;
    var items=data;
    
    //弹幕总数
    var total=data.length;
    
    //是否首次执行
    var run_once=true;
    
    //弹幕索引
    var index=0;
    
    //先执行一次barrager();
    function  barrager(){     
        if(run_once){      
            //如果是首次执行,则设置一个定时器,并且把首次执行置为false      
            looper=setInterval(barrager,looper_time);                      
            run_once=false;  
        }  
        
        //发布一个弹幕  
        $('body').barrager(items[index]); 
         
        //索引自增  
        index++;  
        
        //所有弹幕发布完毕，清除计时器。  
        if(index == total){       
            clearInterval(looper);      
            return false;  
        }      
    }  
});