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中top/parent/frame概述及案例应用
Feb 06 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php实现倒计时效果
2015/12/19 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
汇科协同Java笔试题
2012/03/31 面试题
颐和园导游词
2015/01/30 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS