码迷,mamicode.com
首页 > Web开发 > 详细

JS实现《黑客帝国》落地字母背景

时间:2014-05-07 05:06:36      阅读:707      评论:0      收藏:0      [点我收藏+]

标签:javascript   html   字母   落地   黑客   

bubuko.com,布布扣JS实现《黑客帝国》落地字母背景,这个特别有意思,主要是通过设置字符相关属性,控制循环字母距离顶部的高度值,来达到字母不断循环下落的功能。恩,还有加上一个随机机制,出现各种大小 各个位置 各种颜色 各种长度的效果。好了,废话不多说,天色已晚,先看代码。

======》先发图,有图才有真相。

bubuko.com,布布扣

===============》下面代码,还是挺好玩的哦。

<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>
bubuko.com,布布扣OK,今天就到这里了,睡觉去啊。有兴趣的可以试着玩一玩,多改进下,会有意想不到的效果哦。bubuko.com,布布扣喜欢小弟就关注我一下吧。

JS实现《黑客帝国》落地字母背景,布布扣,bubuko.com

JS实现《黑客帝国》落地字母背景

标签:javascript   html   字母   落地   黑客   

原文地址:http://blog.csdn.net/php5921/article/details/25009461

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!