原文地址：http://www.jq22.com/jquery-info2123

插件描述：在網頁上實現彈幕功能，類似于Bilibili等視頻彈幕網站上的彈幕功能。彩色彈幕、頂端底端彈幕、自定義彈幕速度、實時調整透明度等彈幕該具備的基本功能，都有提供。

簡介

本插件實現彈幕功能，就如某些視頻網站上的彈幕功能一樣，只不過國內大多數視頻網站是用flash實現的，而本插件通過jQuery。 就如絕大多數視頻網站的彈幕功能，私也實現了彩色彈幕，頂端彈幕及底端彈幕，也可以即時操控彈幕透明度。當然也可以在彈幕運行的過程中暫停和繼續。

用法

不用多說，第一步要引入js文件，把jquery.danmu.js和jQuery一起引用。

1 2	<scriptsrc="danmu/jquery-1.11.1.min.js"></script> <script?src="danmu/jquery.danmu.js"></script>

插件中定義了彈幕對象，意指具體某一條彈幕及起信息，對象名字叫”danmu”,該對象有如下屬性：

text——彈幕文本內容。?

color——彈幕顏色。 position——彈幕位置 “0”為滾動 “1” 為頂部 “2”為底部?

size——彈幕文字大小。 “0”為小字 ”1”為大字

time——彈幕所出現的時間。 單位為”分秒“（及1/10秒，100毫秒）

isnew——當出現該屬性時（屬性值科委任意），會認為這是用戶新發的彈幕，從而彈幕在顯示的時候會有邊框。 例如：

1	?vara_danmu={ "text":"2333333", "color":"green","size":"1","position":"0","time":60};?

要顯示邊框的新彈幕：

1	?vara_danmu={ "text":"2333333", "color":"green","size":"1","position":"0","time":60 ,"isnew":" "};?

另外，為提高效率，插件另外定義了一種名為danmuss的對象，意指所有彈幕的集合，這個對象在每個彈幕屏中是唯一的。插件在運行時會把每個danmu對象寫入danmuss對象，然后在相應的時間把某條彈幕放映于屏幕。dammuss對象每個屬性的名稱為彈幕所出現的時間點(分秒)，屬性值為該時間點所出現的所有彈幕的danmu對象(沒有time屬性)所組成的數組。

例如：

1

vardanmuss={ 1:[ { "text":"hahahaha", "color":"red","size":"0","position":"0"}, { "text":"233333", "color":"red","size":"0","position":"2"} ], 3:[ { "text":"poi", "color":"red","size":"1","position":"1"}, { "text":"2333", "color":"#FFFFFF","size":"0","position":"0"} ], 50:[ { "text":"XXX真好", "color":"#FFFFFF","size":"0","position":"2"}, ] };

要在屏幕中插入彈幕，首先需要劃定一個區域，使用<div>。?

例如現在創建一個id=”danmu”的div作為彈幕將要飛過的區域 <div id="danmu"> </div>?

然后調用插件方法，傳遞配置屬性。

("#danmu").danmu({

left: 0, //區域的左邊邊界位置，相對于父div?

top: 0 , //區域的上邊邊界位置，相對于父div?

height: 360, //區域的高度 width: 640, //區域的寬度?

zindex :100, //div的css樣式zindex

speed:5000, //彈幕速度，飛過區域的毫秒數?

sumtime:900 , //彈幕運行總時間

danmuss:{}, //danmuss對象，運行時的彈幕內容?

default_font_color:"#FFFFFF", //彈幕默認字體顏色?

font_size_small:24, //小號彈幕的字體大小,注意此屬性值只能是整數

font_size_big:28, //大號彈幕的字體大小?

opacity:"0.7", //彈幕默認透明度?

top_botton_danmu_time:4000 //頂端底端彈幕持續時間 } );

所有屬性都不是必須指定，默認值就如上。

當不指定danmuss時，也可以在調用此方法后用

1	$('#danmu').danmu("add_danmu",新彈幕的danmu類型對象)

;逐一添加danmu對象。?

當然在彈幕運行的過程中，可以隨時用

1	$('#danmu').danmu("add_danmu",新彈幕的danmu類型對象)?

添加彈幕。?

做完以上準備后，可以使彈幕在該區域開始運行，調用

1	$('#danmu').danmu('danmu_start');?

即可運行。

其他方法：

暫停彈幕：

1	$('#danmu').danmu('danmu_pause');?

暫停后繼續：

1	$('#danmu').danmu('danmu_resume');?

停止彈幕：

1	$('#danmu').danmu('danmu_stop'); ?

即時增加彈幕：

1	$('#danmu').danmu("add_danmu",新彈幕的danmu類型對象);?

使彈幕時間同步與視頻的時間，可能需要和時間相關的方法，如下。

獲取彈幕運行的當前時間(單位為分秒)：

1	$('#danmu').data("nowtime");?

設置彈幕運行的當前時間(單位為分秒)：

1	$('#danmu').data("nowtime"，新時間) ?

更改彈幕透明度：

1	$(#danmu).data("opacity",新透明度數值);

是否處于暫停狀態：

1	$('#danmu').data("paused");

如果需要像視頻網站那樣使用戶所發彈幕得以保存，需要使用到web后端及數據庫技術。

Demo

推薦的方法

通過控制好彈幕div的left、top、height、width、zindex屬性，可以讓彈幕正好懸浮于html視頻之上，就如Demo中的那樣。

在用戶發彈幕時，可以在前端生成兩個danmu對象，一個是有isnew屬性的，即時使用add_danmu方法添加彈幕。另一個是沒有isnew屬性的，使用ajax技術寫入數據庫。

總結

以上是生活随笔為你收集整理的jQuery弹幕插件的全部內容，希望文章能夠幫你解決所遇到的問題。

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