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 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
vue项目接口域名动态获取操作
Aug 13 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验证码函数代码(简单实用)
2013/09/29 PHP
php设计模式之单例模式代码
2016/06/11 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python去除字符串中的换行符
2017/10/11 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python树莓派红外反射传感器
2019/01/21 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python中upper是做什么用的
2020/07/20 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python如何调用百度识图api
2020/09/29 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
英语生日邀请函
2014/01/23 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
演讲开场白和结束语
2015/05/29 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS