首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

终于实现了!精彩的jquery弹幕效果

Posted in Javascript onJuly 18, 2016

本文实例为大家分享了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弹幕效果

- Author -

WuLex

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jquery validation验证表单插件
Jan 07 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
微信小程序工具函数封装
Oct 28 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 #Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 #Javascript
Bootstrap 布局组件（全）
Jul 18 #Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 #Javascript
Bootstrap零基础入门教程(三)
Jul 18 #Javascript
15位和18位身份证JS校验的简单实例
Jul 18 #Javascript
Bootstrap零基础入门教程(二)
Jul 18 #Javascript
Python(3) 裁剪图片(1) Pytesseract(1) GCN(1) Flask(2) PIL(1) 验证码(1) 柱状图(1) 鲲鹏(1) 进度条(1)
You might like
DISCUZ 分页代码
2007/01/02 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python中pass的作用与使用教程
2020/11/13 Python
校园活动策划书范文
2014/01/10 职场文书
上课睡觉检讨书
2014/01/28 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
大学校务公开实施方案
2014/03/31 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
交通事故代理词范文
2015/05/23 职场文书
复活读书笔记
2015/06/29 职场文书