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="" value="" />

     </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="" checked="checked"> 随机

      </label>

      <label class="radio-inline">

       <input type="radio" name="bottomradio" value="" > 设置

      </label>

     </div>

     <div class="col-sm-2">

      <input class="form-control" name="bottom" type="text" placeholder="" value="" />

     </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="" ></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 < ) {

    return result;

   }

   var data = arguments;

   if (arguments.length ==  && 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': ,

    'bottom': ,

    '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() == ) {

    var window_height = $(window).height() - ;

    bottom = Math.floor(Math.random() * window_height + );

    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 "#" + ("" + ((Math.random() *  + 0.5) >> ).toString()).slice(-);

  } 

  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弹幕效果的更多相关文章

  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. JavaScript----流程控制语句

    ##特殊语法 1.语句以;结尾,如果一行只有一条语句,则;可以省略(不建议)2.变量的定义使用var关键字,也可以不使用 * 用:定义的变量是局部变量 * 不用:定义的变量是全局变量(不建议使用) # ...

  2. CF1324F Maximum White Subtree 题解

    原题链接 简要题意: 给定一棵树,每个点有黑白两种颜色:对每个节点,求出包含当前节点的连通图,使得白点数与黑点数差最小.输出这些值. F题也这么简单,咳咳,要是我也熬夜打上那么一场...可惜没时间打啊 ...

  3. canvas.toDataURL()报错的解决方案全都在这了

    报错详尽信息 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases ...

  4. sql-lib闯关61-65

    第六十一关 和六十关基本一样,就是变成了单引号和双括号,这好像是第一次遇见双括号 爆数据库名   ?id=1'))and extractvalue(1, concat(0x5c, (select da ...

  5. 使用SlimYOLOv3框架实现实时目标检测

    介绍 人类可以在几毫秒内在我们的视线中挑选出物体.事实上,你现在就环顾四周,你将观察到周围环境并快速检测到存在的物体,并且把目光回到我们这篇文章来.大概需要多长时间? 这就是实时目标检测.如果我们能让 ...

  6. 使用FME裁剪矢量shapefile文件

  7. 洛谷 P2656 采蘑菇 树形DP+缩点+坑点

    题目链接 https://www.luogu.com.cn/problem/P2656 分析 这其实是个一眼题(bushi 发现如果没有那个恢复系数,缩个点就完了,有恢复系数呢?你发现这个恢复系数其实 ...

  8. 分库分表实践-Sharding-JDBC

    最近一段时间在研究分库分表的一些问题,正好周末有点时间就简单做下总结,也方便自己以后查看. 关于为什么要做分库分表,什么是水平分表,垂直分表等概念,相信大家都知道,这里就不在赘述了. 本文只讲述使用S ...

  9. ElasticSearch 倒排索引

    倒排索引 倒排表以字或词为关键字进行索引,表中关键字所对应的记录表项记录了出现这个字或词的所有文档,一个表项就是一个字表段,它记录该文档的ID和字符在该文档中出现的位置情况. 由于每个字或词对应的文档 ...

  10. JS烟花案例优化版

    不明白为什么是烟花优化版本的先参考作者的烟花基础版本 烟花优化版本主要实在优化爆炸的范围和运动上做了优化,爆炸范围我们采用已圆的爆炸方式,以鼠标点击的位置为圆形爆炸的烟花效果 <!DOCTYPE ...