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程序设计有所帮助。