html css jq 弹幕,Jquery.barrager.js

通用后端

读取服务端有两种模式,适应于不同的场景

1. 实时读取,隔x秒请求一次接口,获取一条弹幕,发送。

2. 一次读取完毕,隔x秒发送一条弹幕。

第一种模式示范代码

server 端(php)

'第一条弹幕',

'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;

}

}

});