jquery.barrager.js是一款專業的網頁彈幕插件。它支持顯示圖片,文字以及超鏈接。支持自定義彈幕的速度、高度、顏色、數量等。能輕松集成到論壇,博客等網站中。

由于IE9以下的IE瀏覽器不兼容CSS圓角,采用兼容樣式,可單獨設置彈幕的顏色,屬性為old_ie_color,建議不要與網頁主背景色相同。

使用方法

使用jquery.barrager.js彈幕插件需要在頁面中引入jquery和jquery.parallux.min.js文件。

發布彈幕

彈幕文字為必選項,圖片,鏈接如果為空則不顯示。其它的可選項有默認值,彈幕具體配置如下代碼。

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

清除所有彈幕

可以通過removeAll()方法來清除所有的彈幕。

$.fn.barrager.removeAll();

集成

通用后端代碼

讀取服務端有兩種模式,適應于各種不同的場景：

1、實時讀取,隔x秒請求一次接口,獲取一條彈幕,發送。

2、一次讀取完畢,隔x秒發送一條彈幕。

注意:json數據需要HTML 實體化以防止xss攻擊。

第一種模式示范代碼 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[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;

}

}

});

總結

以上是生活随笔為你收集整理的php+js实现弹幕,jquery.barrager.js-专业的网页弹幕插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。