终于实现了!精彩的jquery弹幕效果
本文实例为大家分享了jquery弹幕效果，供大家参考，具体内容如下
页面效果如下:
html页面如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
<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>
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现的弹幕效果完整实例
本文实例讲述了jQuery实现的弹幕效果.分享给大家供大家参考,具体如下: 看视频的时候老是会出现一些弹幕,对于这个看着很高大上的特效,其实也不难实现. 先来看看运行效果: 下面将整个代码显示出来: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net弹幕</title> <st
-
简单实现jQuery弹幕效果
在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素
-
基于jQuery实现弹幕APP
今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo
-
JQuery和HTML5 Canvas实现弹幕效果
JQuery和HTML5 Canvas两种方法实现弹幕效果: 方法一,JQuery实现. 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
-
jQuery实现弹幕效果
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;
-
基于jquery实现弹幕效果
用js写的一个弹幕 效果图: 源码: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"&
-
又一枚精彩的弹幕效果jQuery实现
简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random().height().css().append().remove()等,主要是元素的操作 html代码: <a href="#">弹幕技术</a> <div class="mask"> <a href="#" class="button">X</a> </di
-
终于实现了!精彩的jquery弹幕效果
本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下 页面效果如下: html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
jQuery实现的页面弹幕效果【测试可用】
本文实例讲述了jQuery实现的页面弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
-
jQuery实现简单弹幕效果
本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下 话不多说吧,直接看效果吧: 主要思路 其实弹幕的主要思路很简单,就是将div从右向左移动,直到完全移除屏幕之后,将当前div从body中移除,这里我采用了面向对象的思想来处理,具体js代码如下: JS /** * 弹幕 */ $(function () { function BarrageManager (options) { this.opts = { url : './res/danmu.json', load
-
jquery实现直播视频弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQ实现弹幕效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ height:700px; width:1000
-
js实现七夕表白弹幕效果 jQuery实现弹幕技术
本文实例为大家分享了js与jQuery技术实现表白弹幕,供大家参考,具体内容如下 js七夕表白弹幕效果简单版效果: 关键代码: <script> var si; function tangmu(){ clearInterval(si); var text = document.getElementById("text"); var tangmu = document.getElementById("tangmu"); var textStyle=&quo
-
jQuery实现弹幕效果案例
本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie