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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 黑客帝国数字雨效果VC6源代码分享

    黑客帝国数字雨效果VC6源代码分享

    很不错的效果 这个在Win7 X64 VC6编译通过~~ 代码原作者不详. #include <windows.h> #define ID_TIMER 1 #define STRMAXLEN 25 //一个显示列的最大长度 #define STRMINLEN 8 //一个显示列的最小长度 LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ; ////////////////////////////////////////////////

  • 批处理 数码雨代码解释

    批处理 数码雨代码解释

    做了一个批处理的数码雨,老题目了 主要给新手看 主要用于了解批处理的一下知识 1.随机变量的使用 2.变量的叠加 下面是源代码: 复制代码 代码如下: @echo off color 0a :start set num=0 set "echos= " :num set /a a1=%random%%%3 if "%a1%" == "1" set "a1= " if "%a1%" == "2&quo

  • bat实现的模仿黑客帝国里面的数码雨

    ::黑客帝国里数码雨 @echo %dbg% off :: Code by redtek 2006-11-2 CMD@XP :: 出处:http://www.cn-dos.net/forum/viewthread.php?tid=24418 setlocal ENABLEDELAYEDEXPANSION mode con cols=80 lines=30 cls set 退格= set redtek=" " set end=0 :start set /a end+=1 call :ca

  • JS实现黑客帝国文字下落效果

    JS实现黑客帝国文字下落效果

    代码一: 黑客帝国文字下落效果 查看效果     源码下载 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝国文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} #divList {width:800px; h

  • 批处理实现乱雨纷飞（黑客帝国特效）

    废话少说,直接先上一个特效代码 @echo off&mode con cols=42 lines=20&color 02 set m=1&set v=1 set code==^^^&%%%^:!$#^>^<:=~*()@"'`;\|-_+?,.ghijklmnopqrstuvwxyz0123456789abcdef setlocal enabledelayedexpansion :begin set /a num=%random%%%40+1,num1

  • js仿黑客帝国字母掉落效果代码分享

    js仿黑客帝国字母掉落效果代码分享

    看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下,                                      ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt

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

    本文实例讲述了jQuery模拟黑客帝国矩阵效果的方法.分享给大家供大家参考.具体实现方法如下: html部分如下: <div id="container"> <div style="width:10px; word-break :break-all"> 10001001110010010010000 </div> <div style="width:10px; word-break :break-all;margi

  • jQuery模拟爆炸倒计时功能实例代码

     HTML部分  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动

  • jQuery实现的倒计时效果实例小结

    本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!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

  • jQuery实现连续动画效果实例分析

    jQuery实现连续动画效果实例分析

    本文实例讲述了jQuery实现连续动画效果的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery实现一连串的连续动画效果,将这些动画运用先设置好,然后在jQuery的作用下完成一个接一个的动画,这在网页游戏编写中是个基础但重要的动画生成技巧,对于前台设计来说也是有必要掌握的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/ 具体代码如下: <!DOCTYPE html PUBLI

  • jQuery简单动画变换效果实例分析

    jQuery简单动画变换效果实例分析

    本文实例讲述了jQuery简单动画变换效果.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目.j

  • jQuery实现日期联动效果实例

    jQuery实现日期联动效果实例

    本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q

  • jQuery模拟窗口抖动效果

    jQuery模拟窗口抖动效果

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery模拟窗口抖动</title> <style type="text/css"> input{margin-top: 20px;} .center{margin-left: 50%;transform: translate(-50%

  • jQuery实现HTML5 placeholder效果实例

    你一定知道 HTML5新增的 placeholder 属性吧?不知道的也没关系.输入框有默认文本是,常需要这样一个效果,点击让默认文本消失,失去焦点后让默认文本显示. 今天分享一段jQuery代码,模拟 placeholder 效果. Javascript代码: 复制代码 代码如下: function placeHolder(event){   var self = $(this), selfDataValue = self.attr("data-value"), selfValue

  • 利用jQuery实现打字机字幕效果实例代码

    利用jQuery实现打字机字幕效果实例代码

    实现效果: 实现原理: 把html里的代码读进来, 然后跳过"<"和">"之间的代码, 顺便保存了内容的格式, 然后一个定时器,逐个输出. 用到的基础知识: jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuer

  • JQuery切换显示的效果实例代码

    JQuery真的太强大了,真好看! Jquery代码如下: 复制代码 代码如下: $(function () {       $(".n_zyb_gzright .n_zyb_gzrightlist").hover(function () {       $(this).find(".n_zyb_gzrightlistc").attr("style", "display:block").parent().siblings().

随机推荐