標籤：javascript html 字母 落地 駭客
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 onload="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，今天就到這裡了，睡覺去啊。有興趣的可以試著玩一玩，多改進下，會有意想不到的效果哦。喜歡小弟就關注我一下吧。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
