首页
所有分类
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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 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) .NET Framework(2) 磁盘分区(1) 夸克(1) 国际空间站(1) FTP服务器(1) 太空(1) DNS服务器(2) 粒子对撞机(1) 对撞机(1)
You might like
PHP 实用代码收集
2010/01/22 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
OpenCV 模板匹配
2019/07/10 Python
python使用列表的最佳方案
2020/08/12 Python
基于python实现复制文件并重命名
2020/09/16 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
美国背景检查、公共记录和人物搜索网站：BeenVerified
2018/02/25 全球购物
捷克原创男装和女装购物网站：Bolf.cz
2018/04/28 全球购物
英国家喻户晓的家居商店：The Range
2019/03/25 全球购物
《和我们一样享受春天》教学反思
2014/02/07 职场文书
年会搞笑主持词
2014/03/27 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
网络舆情信息简报
2015/07/21 职场文书
Jsonp劫持学习
2021/04/01 PHP
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL