首页
所有分类
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 相关文章推荐
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
JavaScript十大取整方法实例教程
Dec 03 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
遗弃(1) 暴雪(1) LOL(1) 战锤40K(1) 最终幻想(1) 小缇娜的奇幻之地(1) 巫师(1) 我的世界(1) 艾尔登法环(1) 东方异文石(1)
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
基于树莓派的语音对话机器人
2019/06/17 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python中的插入排序的简单用法
2021/01/19 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
美国乡村商店：Plow & Hearth
2016/09/12 全球购物
FC-Moto瑞典：欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
综合实践活动方案
2014/02/14 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript