JS實現(xiàn)《黑客帝國》中的字符下落效果

2012/10/21 10:13:38作者：佚名來源：網(wǎng)絡

移動端

【實例名稱】

《黑客帝國》中的字符下落效果

【實例描述】

所有看過電影《黑客帝國》的人可能都對一個場非常熟悉，那就是一連串的0、l編碼。本例學習如何制作那種字符下落效果。

【實例代碼】

<HTML>
<HEAD>
<TITLE>黑客帝國</TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</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 language="javascript">
var strCount;
var str;
var Color;
var Font;
var sLine = "W<br>W<br>W<br>.<br>B<br>a<br>i<br>D<br>u<br>.<br>C<br>O<br>M";
function OnLoad()
{
 strCount = 40;
 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] = "10px";    //文字的大小
 Font[1] = "12px";
 Font[2] = "14px";
 Font[3] = "16px";
 Font[4] = "18px";
 setTimeout("strik()",50);
}
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"];//刪除數(shù)組元素
    delete str[i]["Speed"];
    delete str[i]["Carch"];
    delete str[i];
   }
   else
   {
    str[i]["Carch"].style.pixelTop += str[i]["Speed"];
   }
  }
  else if(Math.random()<0.25)             //隨機小數(shù)
  {
   str[i] = new Array();
   str[i]["Level"] = Math.round(Math.random()*4);
   str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])<<2)+10;
   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];                         //顏色
   str[i]["Carch"].style.filter = "glow(Color="+Color[str[i]["Level"]]+",Strength=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>
<tr><td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以 IE 為核心的瀏覽器瀏覽本頁，1024*768分辨率為佳</td></tr>
</table>
</BODY>
</HTML>

【運行效果】

運行效果

【難點剖析】

本例的重點是對顏色和速度的隨機設置。JavaScript中的“Math”對象用來提供數(shù)學運算，其中“Math random”用來獲取一個0到1之問的隨機數(shù)?！癕ath.round”是采
用四舍五入方式取得最接近的整數(shù)。代碼中使用了兩維數(shù)組，“delete”方法用來刪除數(shù)組中的元索。

【源碼下載】

本實例JS代碼下載

標簽：字符 JS代碼