jQuery模拟黑客帝国矩阵效果实例


Posted in Javascript onJune 28, 2015

本文实例讲述了jQuery模拟黑客帝国矩阵效果的方法。分享给大家供大家参考。具体实现方法如下:

html部分如下:

<div id="container">
  <div style="width:10px; word-break :break-all">
    10001001110010010010000
  </div>
  <div style="width:10px; word-break :break-all;margin-left:30px">
    the answer is in your mind
  </div>
</div>

css部分如下:

#container div{padding:10px;position:absolute;border:0px dotted brown;width:0px;color:green;text-shadow: 1px 1px 3px #cccccc;}
.text{padding:10px;color:#ccc;}
#panel{width:400px;margin:0 auto;color:white;margin-top:20%;font-size:15px;font-weight:bold;z-index:99999;background:black;}

js部分如下:

$(function() {
  for (var i = 0; i < 3; i++) $('div', '#container').clone().prependTo('#container');
  //克隆一遍增加数据
  range();
  setInterval(drop, 150); //速度150毫秒
});
//排列
function range() {
  var num = 1;
  $('div', '#container').each(function(i) {
    var ww = $(window).width(); //窗口宽度
    var wh = $(window).height();
    var ol = $(this).offset().left; //距左边像素
    var ot = -20; //$(this).offset().top;//从头部以上开始
    i++;
    if (i % 22 == 0) num = 1; //22个一排
    $(this).css({
      "left": (ol + num * 60) + "px",
      "top": (ot + Math.ceil(i / 2) * 30) + "px"
    }); //距左距离保持,距上距离变化
    num++;
  });
}
//降落
function drop() {
  $('div', '#container').each(function(i) {
    var wh = $(window).height();
    var ol = $(this).offset().left;
    var ot = $(this).offset().top;
    var rnd = Math.round(Math.random() * 100);
    var rnd2 = Math.round(Math.random() * 50);
    //i = i == 0 ? 0.5 : i;
    $(this).css({
      "top": (ot + rnd + rnd2) + "px"
    }); //降落的速度
    if (ot >= wh) //如果掉到窗口以下
    {
      //$(this).css({"top":wh-20 +"px"});
      //停在当前位置不让继续从上往下掉
      $(this).css({
        "top": -5 * rnd + "px"
      }); //从顶部以上开始
    }
  });
}

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 #Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 #Javascript
JavaScript实现数组随机排序的方法
Jun 26 #Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 #Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 #Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 #Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
PHP之header函数详解
2021/03/02 PHP
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
微信小程序多张图片上传功能
2017/06/07 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
python发送伪造的arp请求
2014/01/09 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014企业年终工作总结
2014/12/23 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
社区结对共建协议书
2016/03/23 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python