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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
几种tab切换详解
Feb 03 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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
JAVA/JSP学习系列之四
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python 爬虫图片简单实现
2017/06/01 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python selenium自动化测试模型图解
2020/04/15 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
工程师岗位职责
2013/11/08 职场文书
活动总结的格式
2014/05/07 职场文书
文明单位创建材料
2014/12/24 职场文书
工作岗位职责范本
2015/02/15 职场文书
求职推荐信范文
2015/03/27 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
初婚未育证明样本
2015/06/18 职场文书
高中政治教师教学反思
2016/02/23 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Linux中文件的基本属性介绍
2022/06/01 Servers