<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
head
>
<
title
></
title
>
<
link
href
=
"static/css/bootstrap.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"static/css/style.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"dist/css/barrager.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
</
head
>
<
body
>
<
button
class
=
"bb-trigger btn btn-primary btn-lg bb-light-blue"
onclick
=
" run_example() "
>彈彈彈</
button
>
<
hr
/>
<
div
class
=
"row"
>
<
div
class
=
"col-md-6"
>
<
form
class
=
"form-horizontal"
>
<
div
style
=
"display: none"
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-2 control-label"
>文字</
label
>
<
div
class
=
"col-sm-6"
>
<
input
class
=
"form-control"
name
=
"info"
type
=
"text"
placeholder
=
"彈幕文字信息"
/>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-2 control-label"
>鏈接</
label
>
<
div
class
=
"col-sm-6"
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-2 control-label"
>延遲</
label
>
<
div
class
=
"col-sm-2"
>
<
input
class
=
"form-control"
name
=
"speed"
type
=
"text"
placeholder
=
"6"
value
=
"6"
/>
</
div
>
<
label
class
=
"col-sm-2 control-label"
>關閉按鈕</
label
>
<
div
class
=
"col-sm-2"
>
<
input
class
=
"form-control"
name
=
"close"
type
=
"checkbox"
checked >
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-2 control-label"
>高度</
label
>
<
div
class
=
"col-sm-4"
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"bottomradio"
value
=
"0"
checked
=
"checked"
> 隨機
</
label
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"bottomradio"
value
=
"1"
> 設置
</
label
>
</
div
>
<
div
class
=
"col-sm-2"
>
<
input
class
=
"form-control"
name
=
"bottom"
type
=
"text"
placeholder
=
"70"
value
=
"70"
/>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-2 control-label"
>圖片</
label
>
<
div
class
=
"col-sm-6"
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"img"
value
=
"cute.png"
checked
=
""
> cute.png
</
label
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"img"
value
=
"haha.gif"
> haha.gif
</
label
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"img"
value
=
"none"
> 無圖
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-3 control-label"
></
label
>
<
div
class
=
"col-sm-3"
>
<
input
type
=
"button"
class
=
"btn btn-primary bb-light-blue"
onclick
=
" run() "
value
=
"運行"
>
</
div
>
<
div
class
=
"col-sm-3"
>
<
button
class
=
"btn btn-warning "
onclick
=
" clear_barrage() "
> 清除</
button
>
</
div
>
</
div
>
</
form
>
</
div
>
<
div
class
=
"col-md-6"
style
=
"display: none"
>
<
textarea
class
=
"form-control"
id
=
"barrager-code"
rows
=
"14"
></
textarea
>
</
div
>
</
div
>
</
body
>
<
script
src
=
"static/js/jquery-1.9.1.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"static/js/bootstrap.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"dist/js/jquery.barrager.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
>
String.prototype.format = function (args) {
var result = this;
if (arguments.length <
1
) {
return result;
}
var
data
=
arguments
;
if (arguments.length == 1 && typeof (args) == "object") {
data
=
args
;
}
for (var key in data) {
var
value
=
data
[key];
if (undefined != value) {
result
= result.replace("{" + key + "}", value);
}
}
return result;
}
var
barrager_code
=
'var item={\n'
+
" img:'{img}', //圖片 \n" +
" info:'{info}', //文字 \n" +
" href:'{href}', //鏈接 \n" +
" close:{close}, //顯示關閉按鈕 \n" +
" speed:{speed}, //延遲,單位秒,默認6 \n" +
" bottom:{bottom}, //距離底部高度,單位px,默認隨機 \n" +
" color:'{color}', //顏色,默認白色 \n" +
" old_ie_color:'{old_ie_color}', //ie低版兼容色,不能與網頁背景相同,默認黑色 \n" +
" }\n" + "$('body').barrager(item);"
;
$(function() {
var default_item = {
'img': 'static/heisenberg.png',
'info': '彈幕文字信息',
'href': 'http://www.yaseng.org',
'close': true,
'speed': 6,
'bottom': 70,
'color': '#fff',
'old_ie_color': '#000000'
};
var item = { 'img': 'static/img/heisenberg.png', 'href': 'http://www.baidu.com', 'info': 'oldman!WQNMLGB' };
//item1={'href':'http://www.baidu.com','info':'這是一條很長很長的字幕','close':false};
$('#barrager-code').val(barrager_code.format(default_item));
$('body').barrager(item);
});
function run() {
var shi = [
"朱砂", "天下", "殺伐", "人家", "韶華", "風華", "繁華", "血染", " 墨染 ", "白衣", " 素衣", " 嫁衣 ", "傾城 ", "孤城 ", "空城 ", "舊城", "舊人 ", "伊人 ", "心疼 ", "春風", " 古琴 ", "無情 ", "迷離 ", "奈何", " 斷弦", " 焚盡 ", "散亂", " 陌路 ", "亂世 ", "笑靨 ", "淺笑", " 明眸", " 輕嘆", " 煙火", "一生 " +
"三生", " 浮生 ", "桃花 ", "梨花", " 落花", " 煙花", " 離殤", " 情殤", " 愛殤 ", "劍殤", " 灼傷", " 倉皇 ", "匆忙", " 陌上", " 清商", "焚香 ", "墨香 ", "微涼 " +
"斷腸", " 痴狂 ", "凄涼", " 黃梁", " 未央", " 成雙", " 無恙", " 虛妄", " 凝霜", " 洛陽", " 長安", " 江南", " 忘川", " 千年", " 紙傘 ", "煙雨", " 回眸 ", "公子" +
"紅塵", " 紅顏 ", "紅衣", " 紅豆 ", "紅線 ", "青絲 ", "青史", " 青冢", " 白發", " 白首", " 白骨 ", "黃土", " 黃泉 ", "碧落", " 紫陌情深緣淺", " 情深不壽 ", "莫失莫忘" +
" 陰陽相隔 ", "如花美眷", " 似水流年", " 眉目如畫", " 曲終人散", " 繁華落盡 ", "不訴離殤 ", "一世長安"
];
var
info
=
shi
[Math.floor(Math.random() * shi.length)]; //$('input[
name
=
info
]').val();
(info == '') ?
info
=
'請填寫彈幕文字'
:
info
= info;
var href = $('input[
name
=
href
]').val();
var
speed
=
parseInt
($('input[
name
=
speed
]').val());
var
bottom
=
parseInt
($('input[
name
=
bottom
]').val());
var
code
=
barrager_code
;
if ($('input:radio[
name
=
bottomradio
]:checked').val() == 0) {
var window_height = $(window).height() - 150;
bottom
=
Math
.floor(Math.random() * window_height + 40);
code
= code.replace(" bottom:{bottom}, //距離底部高度,單位px,默認隨機 \n", '');
}
var img = $('input:radio[
name
=
img
]:checked').val();
if (img == 'none') {
code
= code.replace(" img:'{img}', //圖片 \n", '');
}
var item = {
'img': 'static/img/' + img,
'info': info,
'href': href,
'close': true,
'speed': speed,
'bottom': bottom,
'color': getRandomColor(),
'old_ie_color': getRandomColor()
};
if (!$('input[
name
=
close
]').is(':checked')) {
item.close
=
false
;
}
code
= code.format(item);
$('#barrager-code').val(code);
try {
eval(code);
} catch (e) {
/*name: 錯誤名稱
number: 錯誤號
description: 描述信息
message: 錯誤信息
fileName: 錯誤發生的文件
stack: 錯誤發生時的調用堆棧 */
alert(e.message);
}
return false;
}
function clear_barrage() {
$.fn.barrager.removeAll();
}
function getRandomColor() {
return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
}
function run_example() {
var wenzi = ["Hello", "網上", "x戰警", "蜘蛛俠", "死侍"];
var example_item = { 'img': 'static/img/heisenberg.png', 'info': wenzi[Math.floor(Math.random() * wenzi.length)] };
$('body').barrager(example_item);
return false;
}
</
script
>
</
html
>