首页
所有分类
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 一道字符串分解的题目
Aug 03 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
js改变Iframe中Src的方法
May 05 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
详解微信小程序开发之formId使用（模板消息）
Aug 27 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
全面解析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
心得体会(660) 证婚词(21) 岗位职责(1324) 自荐信(981) 创业计划书(312) 求职信(1029) 推荐信(292) 思想汇报(404) 职业生涯规划书(234) 演讲稿(869)
You might like
php侧拉菜单 漂亮，可以向右或者向左展开，支持FF，IE
2009/10/15 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
浅谈Node.js：fs文件系统模块
2016/12/08 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
详解webpack解惑：require的五种用法
2017/06/09 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
详解python播放音频的三种方法
2019/09/23 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
FC-Moto西班牙：摩托车手最大的购物场所之一
2019/04/11 全球购物
Araks官网：纽约内衣品牌
2020/10/15 全球购物
关键字final的用法
2013/10/02 面试题
神路信息Java面试题目
2013/03/31 面试题
护理专业自我鉴定
2014/01/30 职场文书
建材投资建议书
2014/05/16 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
捐助感谢信
2015/01/22 职场文书
英文邀请函
2015/02/02 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python