利用jQuery实现自定义网页弹幕插件



7 24 9



特效描述:利用jQuery实现 自定义 网页弹幕插件,利用jQuery实现自定义网页弹幕插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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">

2. 引入JS

<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" 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>

3. HTML代码

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--弹幕-->
<!--颜色-->
<!--代码格式化-->
</head>
<body class="bb-js">
<div class="container">
	<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="">
							</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>
	</div>
</div>
<script type="text/javascript" src="static/js/tinycolor-0.9.15.min.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://51qianduan.com',
			'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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 弹幕 文本框 text文本框 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到