首页 > 代码库 > JS实现《黑客帝国》落地字母背景
JS实现《黑客帝国》落地字母背景
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 onl oad() { 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 onl oad="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,今天就到这里了,睡觉去啊。有兴趣的可以试着玩一玩,多改进下,会有意想不到的效果哦。喜欢小弟就关注我一下吧。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。