zoomla
Version:
16年专业研发|中文alexa排名第一的CMS品牌-基于dotNET core、功能强大，集成站群、微信开发、小程序与ERP及OA办公系统，支持国际语言和多民族语言，世界五百强与大型门户专用高端网站内核CMS系统
591 lines (485 loc) • 22.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jquery.barrager.js 专业的网页弹幕插件</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
<link rel="stylesheet" type="text/css" href="dist/css/barrager.css">
<link rel="stylesheet" type="text/css" href="static/pick-a-color/css/pick-a-color-1.2.3.min.css">
<link type="text/css" rel="stylesheet" href="static/syntaxhighlighter/styles/shCoreDefault.css"/>
</head>
<body class="bb-js">
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand navbar-brand-active" href="./">Jquery.barrager.js</a>
</div>
<div class="collapse navbar-collapse navbar-bb-collapse">
<ul class="nav navbar-nav">
<li><a href="./#custom">自定义</a></li>
<li><a href="./#usage">使用</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">集成 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="./#general-server">通用集成</a></li>
<li><a href="./#discuz">Discuz</a></li>
<li><a href="./#wordpress">Wordpress</a></li>
</ul>
</li>
<li><a href="./#update">版本</a></li>
<li><a href="./#discuss">讨论</a></li>
<li><a href="http://www.uauc.net" target="_blank">UaUc</a></li>
<li><a href="http://www.yaseng.org" target="_blank">Yaseng</a></li>
</ul>
<!--
<ul class="nav navbar-nav navbar-right">
<li>
<a href="./documentation.html">API Documentation</a>
</li>
</ul>
-->
</div>
</div>
</div>
<div id="content" class="bb-docs-header" tabindex="-1">
<div class="container text-center">
<div class="bb-masthead">
<h1>Jquery.barrager.js</h1>
<p>
专业的网页弹幕插件
</p>
</div>
<div class="bb-meta">
<ul class="bb-meta-list">
<li>
<span>Version 1.0</span>
</li>
<li>·</li>
<li>
<a href="https://github.com/yaseng/jquery.barrager.js" target="_blank">下载</a>
</li>
<li>·</li>
<li>
<a href="https://github.com/yaseng/jquery.barrager.js" target="_blank">Github</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<section class="bb-section">
<div class="lead-top">
<p class="lead">
<b>Jquery.barrager.js</b> 是一款优雅的网页弹幕插件,支持显示图片,文字以及超链接。支持速度、高度、颜色、数量等自定义。
</p>
<div class="text-center">
<p class="hidden-xs bb-code code-leader">
$('<span class="bb-code-string">body</span>').barrager(<span class="bb-code-string">{'img':'barrager.png','info':'Hello world!'}</span>);</br>
</p>
<p>
<button class="bb-trigger btn btn-primary btn-lg bb-light-blue" onclick="run_example()"> 弹弹弹</button>
</p>
</div>
</div>
</section>
<section id="custom" class="bb-section">
<div class="page-header">
<h2>自定义</h2>
</div>
<div class="row">
<div class="col-md-6">
<form class="form-horizontal">
<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">
<input class="form-control" name="href" type="text" placeholder="http://www.yaseng.org"/>
</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 class="form-group">
<label class="col-sm-2 control-label" >颜色</label>
<div class="col-sm-6">
<input type="text" value="fff" name="color" class="pick-a-color form-control">
</div>
</div>
</form>
<div class="form-group">
<label class="col-sm-3 control-label" ></label>
<div class="col-sm-3">
<button class="btn btn-primary bb-light-blue" onclick="run()"> 运行</button>
</div>
<div class="col-sm-3">
<button class="btn btn-warning " onclick="clear_barrage()"> 清除</button>
</div>
</div>
</div>
<div class="col-md-6">
<textarea class="form-control" id="barrager-code" rows="14" ></textarea>
</div>
</div>
</section>
<section id="usage" class="bb-section">
<div class="page-header">
<h2>使用</h2>
</div>
<div>
<h3>发布弹幕</h3>
弹幕文字必选,图片,链接为空则不显示,其他的可选项有默认值,弹幕具体配置如下代码。
<pre class="brush: 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);
</pre>
<h3>清除所有弹幕</h3>
<pre class="brush: js;">
$.fn.barrager.removeAll();
</pre>
<h3> 兼容低版本ie </h3>
ie 浏览器小于9不兼容css 圆角,采用兼容样式,可单独设置弹幕的颜色,属性为old_ie_color,建议不要与网页主背景色相同。
兼容模式如图</br></br>
<img src="static/img/ie.png">
</div>
</section>
<section id="usage" class="bb-section">
<div class="page-header">
<h2>集成</h2>
</div>
<div>
<h3>发布弹幕</h3>
<section id="general-server" class="bb-section">
<h4> 通用后端 </h4>
读取服务端有两种模式,适应于不同的场景 </br>
1. 实时读取,隔x秒请求一次接口,获取一条弹幕,发送。 </br>
2. 一次读取完毕,隔x秒发送一条弹幕。</br>
第一种模式示范代码</br>
server 端(php)</br>
<pre class="brush: 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)]);
</pre>
浏览器端获取json 弹幕数据,setInterval 调用,如有弹幕,就显示。</br>
代码如下
<pre class="brush: js">
//每条弹幕发送间隔
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);
}
});
}
</pre>
效果如图
<img src="screenshot/demo_2.gif" class="img-responsive" >
</br>
第二种模式示范代码。 </br>
server 端 (php)
<pre class="brush: 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);
</pre>
浏览器端 </br>
<pre class="brush: js">
$.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;
}
}
});
</pre>
效果如图
<img src="screenshot/demo_3.gif" class="img-responsive" >
</br>
</section>
<section id="discuz" class="bb-section">
<h4> Discuz </h4>
discuz 编写了一个插件,采用的是第二种模式。可以显示最近帖子,最新回复,或者指定帖子内容信息。并且可以在管理页面轻松设置各种弹幕参数。
</section>
<section id="wordpress" class="bb-section">
<h4> Wordpress </h4>
暂无
</section>
</div>
</section>
<section id="update" class="bb-section">
<h3> 版本更新 </h3>
<h4> 1.0 </h3>
实现网页弹幕基本功能
</section>
<section id="discuss" class="bb-section">
<h4> 讨论 </h4>
uauc 技术产品交流群:<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=674e19fafcde6bfc8f11207b7ab4af29bc40a8f38adbf3d47b310d68e1e3ce40"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="UaUc产品交流群" title="UaUc产品交流群"></a>
</section>
</div>
<div class="well container">
<div style="float:right">
<a href="https://weibo.com/yasengberg" class="twitter-share-button" data-via="makeusabrew" data-related="makeusabrew" data-size="large">Weibo</a>
</div>
© 2010-2016 <a href="http://www.uauc.net">UaUc.NeT</a>.
by — yaseng@uauc.net <a href="http://www.yaseng.org">yaseng.org</a>
</div>
<!-- JS dependencies -->
<script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/tinycolor-0.9.15.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.barrager.min.js"></script>
<script type="text/javascript" src="static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="static/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="static/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="static/pick-a-color/js/pick-a-color-1.2.3.min.js"></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() {
SyntaxHighlighter.all();
$(".pick-a-color").pickAColor();
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':'Jquery.barrager.js 专业的网页弹幕插件'};
//item1={'href':'http://www.baidu.com','info':'这是一条很长很长的字幕','close':false};
$('#barrager-code').val(barrager_code.format(default_item));
$('body').barrager(item);
//每条弹幕发送间隔
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);
}
});
}
function barrager(){
}
});
function run(){
var info=$('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':'#'+$('input[name=color').val(),
'old_ie_color':'#'+$('input[name=color').val()
};
if(!$('input[name=close]').is(':checked')){
item.close=false;
}
code=code.format(item);
console.log(code);
$('#barrager-code').val(code);
eval(code);
}
function clear_barrage(){
$.fn.barrager.removeAll();
}
function run_example(){
var example_item={'img':'static/img/heisenberg.png','info':'Hello world!'};
$('body').barrager(example_item);
return false;
}
</script>
</body>
</html>