首页
所有分类
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对象、属性、事件手册集合方便查询
Jul 04 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 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
2022年7月新番(1) SSH(3) OVERLORD(1) character(1) 字符集(1) mysql(6) 数据表(1) Vscode(3) data(4) 时钟(1)
You might like
php发送与接收流文件的方法
2015/02/11 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php中序列化与反序列化详解
2017/02/13 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
在Z-Blog中运行代码[html][/html]（纯JS版）
2007/03/25 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Less 安装及基本用法
2018/05/05 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
微信小程序实现点击效果
2019/06/21 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JavaScript ECMA-262-3 深入解析（二）：变量对象实例详解
2020/04/25 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python代码过长的换行方法
2018/07/19 Python
Python解析json代码实例解析
2019/11/25 Python
python实现UDP协议下的文件传输
2020/03/20 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
印度尼西亚值得信赖的第一家网店：Bhinneka
2018/07/16 全球购物
Java模拟试题
2014/11/10 面试题
小学教师事迹材料
2014/01/13 职场文书
元旦晚会感言
2014/03/12 职场文书
大学新生入学教育方案
2014/05/16 职场文书
大专生自荐书范文
2014/06/22 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
爱情保证书
2015/01/17 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
深入理解python协程
2021/06/15 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js