JS实现《黑客帝国》落地字母背景。这个特别有意思，主要是通过设置字符相关属性。控制循环字母距离顶部的高度值，来达到字母不断循环下落的功能。
恩，还有加上一个随机机制，出现各种大小 各个位置 各种颜色 各种长度的效果。
好了，废话不多说，天色已晚，先看代码。
======》先发图，有图才有真相。
===============》以下代码，还是挺好玩的哦。
- <HTML>
- <HEAD>
- <TITLE>黑客帝国</TITLE>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- </HEAD>
- <style type="text/css">
- body
- {
- overflow:hidden;
- margin:0;
- background-color:#000000;
- font-family:宋体;
- }
- DIV.#heike
- {
- overflow:hidden;
- position:relative;
- top:5%;
- width:90%;
- height:90%;
- border-style:solid;
- border-width:1;
- border-color:#009900;
- }
- </style>
- <script type="text/javascript">
- var strCount;
- var str;
- var Color;
- var Font;
- var sLine = "1<br>0<br>0<br>.<br>1<br>0<br>1<br>1<br>1<br>.<br>0<br>O<br>1<br>1<br>0<br>1<br>1";
- function OnLoad()
- {
- strCount = 60;
- str = [];
- Color = [];
- Font = [];
- Color[0] = "#002211";//文字的颜色
- Color[1] = "#003311";
- Color[2] = "#005511";
- Color[3] = "#008811";
- Color[4] = "#00BB99";
- Color[5] = "#114411";
- Color[6] = "#335566";
- Color[7] = "#668899";
- Color[8] = "#99BBAA";
- Color[9] = "#CECECC";
- Font[0] = "20px"; //文字的大小
- Font[1] = "12px";
- Font[2] = "24px";
- Font[3] = "36px";
- Font[4] = "48px";
- setTimeout("strik()",100);
- }
- function strik()
- {
- for(var i=0;i<strCount;i++)
- {
- if(typeof(str[i]) != "undefined") //假设字符串存在
- {
- if(str[i]["Carch"].style.pixelTop > heike.clientHeight)
- {
- str[i]["Carch"].outerHTML = "";
- delete str[i]["Level"];//删除数组元素
- delete str[i]["Speed"];
- delete str[i]["Carch"];
- delete str[i];
- }
- else
- {
- str[i]["Carch"].style.pixelTop += str[i]["Speed"];//距离顶部的高度等于累加上Speed的值
- }
- }
- else if(Math.random()<0.25) //随机小数
- {
- str[i] = new Array();
- str[i]["Level"] = Math.round(Math.random()*4); //0~4
- str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])<<2)+5;//(0~16)+5 后面加的数字越小。字母下路的速度越慢
- document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>");//加入字母的出现区域
- str[i]["Carch"] = document.all["SPAN_"+i];
- str[i]["Carch"].style.fontSize = Font[str[i]["Level"]]; //字体
- str[i]["Carch"].style.position = "absolute"; //位置
- str[i]["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth); //x坐标
- str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight; //y坐标
- str[i]["Carch"].style.color = Color[str[i]["Level"]+5]; //颜色0~9
- str[i]["Carch"].style.filter = "glow(Color="+Color[str[i]["Level"]]+",Strength=5)";//滤镜效果 glow(color=+#988fff,5)
- str[i]["Carch"].style.zIndex = str[i]["Level"]; //z-Index 堆砌次序
- }
- }
- setTimeout("strik()",50);
- }
- </script>
- <BODY οnlοad="OnLoad()">
- <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
- <tr><td align="center" height="100%"><div id="heike"></div></td></tr>
-
- </table>
- </BODY>
- </HTML>
OK。今天就到这里了，睡觉去啊。有兴趣的能够试着玩一玩，多改进下，会有意想不到的效果哦。
喜欢小弟就关注我一下吧。
