html页面如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title></title>
  5.   <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  6.   <link href="static/css/style.css" rel="stylesheet" type="text/css" />
  7.   <link href="dist/css/barrager.css" rel="stylesheet" type="text/css" />
  8.  </head>
  9.  <body>
  10.   <button class="bb-trigger btn btn-primary btn-lg bb-light-blue" onclick=" run_example() ">弹弹弹</button>
  11.  
  12.   <hr/>
  13.   <div class="row">
  14.    <div class="col-md-6">
  15.     <form class="form-horizontal">
  16.      <div style="display: none">
  17.      <div class="form-group">
  18.      <label class="col-sm-2 control-label" >文字</label>
  19.      <div class="col-sm-6">
  20.       <input class="form-control" name="info" type="text" placeholder="弹幕文字信息"/>
  21.      </div>
  22.     </div>
  23.      <div class="form-group">
  24.      <label class="col-sm-2 control-label" >链接</label>
  25.      <div class="col-sm-6">
  26.       <input class="form-control" name="href" type="text" placeholder="http://www.yaseng.org"/>
  27.      </div>
  28.      </div>
  29.  
  30.      <div class="form-group">
  31.      <label class="col-sm-2 control-label" >延迟</label>
  32.      <div class="col-sm-2">
  33.       <input class="form-control" name="speed" type="text" placeholder="" value="" />
  34.      </div>
  35.  
  36.      <label class="col-sm-2 control-label" >关闭按钮</label>
  37.      <div class="col-sm-2">
  38.       <input class="form-control" name="close" type="checkbox" checked >
  39.      </div>
  40.  
  41.     </div>
  42.  
  43.      <div class="form-group">
  44.      <label class="col-sm-2 control-label" >高度</label>
  45.      <div class="col-sm-4">
  46.       <label class="radio-inline">
  47.        <input type="radio" name="bottomradio" value="" checked="checked"> 随机
  48.       </label>
  49.       <label class="radio-inline">
  50.        <input type="radio" name="bottomradio" value="" > 设置
  51.       </label>
  52.      </div>
  53.      <div class="col-sm-2">
  54.       <input class="form-control" name="bottom" type="text" placeholder="" value="" />
  55.      </div>
  56.     </div>
  57.      <div class="form-group">
  58.       <label class="col-sm-2 control-label" >图片</label>
  59.       <div class="col-sm-6">
  60.        <label class="radio-inline">
  61.         <input type="radio" name="img" value="cute.png" checked=""> cute.png
  62.        </label>
  63.        <label class="radio-inline">
  64.         <input type="radio" name="img" value="haha.gif"> haha.gif
  65.        </label>
  66.        <label class="radio-inline">
  67.         <input type="radio" name="img" value="none"> 无图
  68.        </label>
  69.       </div>
  70.      </div>
  71.      </div>
  72.  
  73.      <div class="form-group">
  74.      <label class="col-sm-3 control-label" ></label>
  75.      <div class="col-sm-3">
  76.       <input type="button" class="btn btn-primary bb-light-blue" onclick=" run() " value="运行">
  77.      </div>
  78.      <div class="col-sm-3">
  79.       <button class="btn btn-warning " onclick=" clear_barrage() "> 清除</button>
  80.      </div>
  81.     </div>
  82.     </form>
  83.    </div>
  84.   <div class="col-md-6" style="display: none">
  85.    <textarea class="form-control" id="barrager-code" rows="" ></textarea>
  86.   </div>
  87.   </div>
  88.  </body>
  89.  <script src="static/js/jquery-1.9.1.min.js" type="text/javascript"></script>
  90.  <script src="static/js/bootstrap.min.js" type="text/javascript"></script>
  91.  <script src="dist/js/jquery.barrager.js" type="text/javascript"></script>
  92.  <script type="text/javascript">
  93.   String.prototype.format = function (args) {
  94.    var result = this;
  95.    if (arguments.length < ) {
  96.     return result;
  97.    }
  98.    var data = arguments;
  99.    if (arguments.length ==  && typeof (args) == "object") {
  100.     data = args;
  101.    }
  102.    for (var key in data) {
  103.     var value = data[key];
  104.     if (undefined != value) {
  105.      result = result.replace("{" + key + "}", value);
  106.     }
  107.    }
  108.    return result;
  109.   }
  110.   var barrager_code =
  111.   'var item={\n' +
  112.   " img:'{img}', //图片 \n" +
  113.   " info:'{info}', //文字 \n" +
  114.   " href:'{href}', //链接 \n" +
  115.   " close:{close}, //显示关闭按钮 \n" +
  116.   " speed:{speed}, //延迟,单位秒,默认6 \n" +
  117.   " bottom:{bottom}, //距离底部高度,单位px,默认随机 \n" +
  118.   " color:'{color}', //颜色,默认白色 \n" +
  119.   " old_ie_color:'{old_ie_color}', //ie低版兼容色,不能与网页背景相同,默认黑色 \n" +
  120.   " }\n" + "$('body').barrager(item);"
  121.   ;
  122.  
  123.   $(function() {
  124.    var default_item = {
  125.     'img': 'static/heisenberg.png',
  126.     'info': '弹幕文字信息',
  127.     'href': 'http://www.yaseng.org',
  128.     'close': true,
  129.     'speed': ,
  130.     'bottom': ,
  131.     'color': '#fff',
  132.     'old_ie_color': '#000000'
  133.    };
  134.    var item = { 'img': 'static/img/heisenberg.png', 'href': 'http://www.baidu.com', 'info': 'oldman!WQNMLGB' };
  135.    //item1={'href':'http://www.baidu.com','info':'这是一条很长很长的字幕','close':false};
  136.    $('#barrager-code').val(barrager_code.format(default_item));
  137.  
  138.    $('body').barrager(item);
  139.  
  140.   });
  141.  
  142.   function run() {
  143.    var shi = [
  144.     "朱砂", "天下", "杀伐", "人家", "韶华", "风华", "繁华", "血染", " 墨染 ", "白衣", " 素衣", " 嫁衣 ", "倾城 ", "孤城 ", "空城 ", "旧城", "旧人 ", "伊人 ", "心疼 ", "春风", " 古琴 ", "无情 ", "迷离 ", "奈何", " 断弦", " 焚尽 ", "散乱", " 陌路 ", "乱世 ", "笑靥 ", "浅笑", " 明眸", " 轻叹", " 烟火", "一生 " +
  145.     "三生", " 浮生 ", "桃花 ", "梨花", " 落花", " 烟花", " 离殇", " 情殇", " 爱殇 ", "剑殇", " 灼伤", " 仓皇 ", "匆忙", " 陌上", " 清商", "焚香 ", "墨香 ", "微凉 " +
  146.     "断肠", " 痴狂 ", "凄凉", " 黄梁", " 未央", " 成双", " 无恙", " 虚妄", " 凝霜", " 洛阳", " 长安", " 江南", " 忘川", " 千年", " 纸伞 ", "烟雨", " 回眸 ", "公子" +
  147.     "红尘", " 红颜 ", "红衣", " 红豆 ", "红线 ", "青丝 ", "青史", " 青冢", " 白发", " 白首", " 白骨 ", "黄土", " 黄泉 ", "碧落", " 紫陌情深缘浅", " 情深不寿 ", "莫失莫忘" +
  148.     " 阴阳相隔 ", "如花美眷", " 似水流年", " 眉目如画", " 曲终人散", " 繁华落尽 ", "不诉离殇 ", "一世长安"
  149.    ];
  150.    var info = shi[Math.floor(Math.random() * shi.length)]; //$('input[name=info]').val();
  151.    (info == '') ? info = '请填写弹幕文字' : info = info;
  152.    var href = $('input[name=href]').val();
  153.    var speed = parseInt($('input[name=speed]').val());
  154.    var bottom = parseInt($('input[name=bottom]').val());
  155.    var code = barrager_code;
  156.    if ($('input:radio[name=bottomradio]:checked').val() == ) {
  157.     var window_height = $(window).height() - ;
  158.     bottom = Math.floor(Math.random() * window_height + );
  159.     code = code.replace(" bottom:{bottom}, //距离底部高度,单位px,默认随机 \n", '');
  160.  
  161.    }
  162.  
  163.    var img = $('input:radio[name=img]:checked').val();
  164.  
  165.    if (img == 'none') {
  166.  
  167.     code = code.replace(" img:'{img}', //图片 \n", '');
  168.    }
  169.  
  170.    var item = {
  171.     'img': 'static/img/' + img,
  172.     'info': info,
  173.     'href': href,
  174.     'close': true,
  175.     'speed': speed,
  176.     'bottom': bottom,
  177.     'color': getRandomColor(),
  178.     'old_ie_color': getRandomColor()
  179.    };
  180.  
  181.    if (!$('input[name=close]').is(':checked')) {
  182.     item.close = false;
  183.    }
  184.  
  185.    code = code.format(item);
  186.    $('#barrager-code').val(code);
  187.  
  188.    try {
  189.     eval(code);
  190.    } catch (e) {
  191.     /*name: 错误名称
  192.     number: 错误号
  193.     description: 描述信息
  194.     message: 错误信息
  195.     fileName: 错误发生的文件
  196.     stack: 错误发生时的调用堆栈 */
  197.     alert(e.message);
  198.    }
  199.    return false;
  200.   }
  201.  
  202.   function clear_barrage() {
  203.    $.fn.barrager.removeAll();
  204.   }
  205.  
  206.   function getRandomColor() {
  207.    return "#" + ("" + ((Math.random() *  + 0.5) >> ).toString()).slice(-);
  208.   } 
  209.  
  210.   function run_example() {
  211.    var wenzi = ["Hello", "网上", "x战警", "蜘蛛侠", "死侍"];
  212.    var example_item = { 'img': 'static/img/heisenberg.png', 'info': wenzi[Math.floor(Math.random() * wenzi.length)] };
  213.    $('body').barrager(example_item);
  214.    return false;
  215.  
  216.   }
  217.  
  218.  </script>
  219. </html>

精彩的jquery弹幕效果的更多相关文章

  1. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  2. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  3. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  4. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  5. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  6. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  7. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  8. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  9. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

随机推荐

  1. Python Django撸个WebSSH操作Kubernetes Pod（下）- 终端窗口自适应Resize

    追求完美不服输的我,一直在与各种问题斗争的路上痛并快乐着 上一篇文章Django实现WebSSH操作Kubernetes Pod最后留了个问题没有解决,那就是terminal内容窗口的大小没有办法调整 ...

  2. Red Team 工具集之网络钓鱼和水坑攻击

    来自:信安之路(微信号:xazlsec),作者:myh0st 参考项目:https://github.com/infosecn1nja/Red-Teaming-Toolkit 上图是一个 Red Te ...

  3. 免费IP归属地查询接口汇总

    目前做一个项目,需要判断是国内还是国外的IP,具体要求为接口稳定,速度快,免费,不异常,所以我整理了优质的接口供大家筛选. IP归属地查询API 一,淘宝API接口 http://ip.taobao. ...

  4. MySQL数据库升级

    当前不少系统的数据库依旧是MySQL5.6,由于MySQL5.7及MySQL8.0在性能及安全方面有着很大的提升,因此需要升级数据库.本文通过逻辑方式.物理方式原地升级来介绍MySQL5.6 升级至M ...

  5. 解决WSL在执行32位程序时报错“Exec format error”的问题

    当你尝试在WSL上运行32位的程序时,shell将会报错:cannot execute binary file: Exec format error. 这是因为WSL目前暂不支持32位的ELF可执行文 ...

  6. 大多数人不知道的表格其他写法的onmouseover效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. CompletableFuture异步编排

    什么是CompletableFuture CompletableFuture是JDK8提供的Future增强类.CompletableFuture异步任务执行线程池,默认是把异步任务都放在ForkJo ...

  8. leetcode 每日签到 409. 最长回文串

    题目: 最长回文串 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: ...

  9. Spring05——Spring 如何实现事务管理

    在此之前,我们已经了解了 Spring 相关的基础知识,今天将为给位带来,有关 Spring 事务代理的相关知识.关注我的公众号「Java面典」,每天 10:24 和你一起了解更多 Java 相关知识 ...

  10. pyplot 作图总结

    折线图 下面是绘制折线图,设置图片的横轴纵轴标签,图片标题的API的用法. import matplotlib.pyplot as pyplot # init pyplot.figure() # ar ...