JS实现黑客帝国文字下落效果

代码一：

黑客帝国文字下落效果

查看效果源码下载

源代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title黑客帝国文字下落/title样式html，正文{ margin:0划水：0;背景色： # 000;} # divList { width:800px高度：500 pxborder : solid 3px gray margin : 0px自动；飞越：隐藏；相对位置：} .divText {position:绝对值；} .div text span { display : block font-weight :粗体；font-family :快递新品；}/style脚本src=' http :http://apps。bdimg。com/libs/jquery/1。9 .0/jquery。量滴js '/script/head body h1 style=' text-align : center；''颜色：灰色'黑客帝国文字下落(span id=' span count ' 0/span)/h1 div id=' div list '/div脚本函数兰德(最小值，最大值){ 0返回最小数学。圆(数学。random()*(max-min))；}函数add() { var x=rand(0，800)；var html=' div class=' div text ' style=' left : ' x ' px；bottom :500 px“”；/* var color 1=[]；var color 2=[]；var color 3=[]；var color 4=[]；var color 5=[]；var color 6=[]；for(var I=1；i17I){ var f=I . ToString(16)；颜色1。push(' 0 ' f ' 0 ')；颜色2。推动(f ' 00’)；颜色3。推动(' 00 ' f)；颜色4。push(' 0 ' f f)；颜色5。push(f f ' 0’)；颜色6。push(f ' 0 ' f)；} var color=[color1、color2、color3、color4、color5、color 6]；var ci=rand(0，5)；*/var color=[]；for(var I=1；i17I){ var f=I . ToString(16)；颜色。push(' 0 ' f ' 0 ')；} var fontSize=rand(9，24)；for(var I=1；i17i ) { var c=rand(33，127)；var c=字符串。FromCharCode(c)；//html=' span class=' s ' I ' style=' color : # ' color[ci][I-1]'；font-size : ' font size ' px“c”/span；html=' span class=' s ' I ' style=' color : # ' color[I-1]'；font-size : ' font size ' px文字-阴影：0 px 0px 10px # '颜色[I-1]'；“c”/span；} html='/div '；$('#divList ').追加(html)；}函数run() { var x=rand(0，100)；if(x 100){ add()；} $('#spanCount ').html($(').divText ').size())；$('.divText ').每个（函数(){ var y=$(this)).css(“”底部');y=ParSeint(y)；y -=$(这个)。查找(' span ').等式(0).高度();$(这个)。css('bottom '，' y ' px ')；if (y $(这个)。height()=0) { $(this).移除();返回；} $(这个)。查找(' span ').每个（函数(){ var c=rand(33，127)；var c=字符串。FromCharCode(c)；$(这个)。html(c)；});});window.setTimeout(运行，100);} run()；/脚本/正文/html代码二：

在一个射流研究…的学习资料上，看到一个关于黑客帝国文字下落的特效！挺好玩的，贴个源码分享一下！

HTMLHEAD TITLE 《黑客帝国》中的字符下落效果/TItle meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/HeAdstyle类型=' text/CSS '正文{溢出：隐藏；余量：0背景-颜色： # 000000；字体系列：宋体；}DIV .# heike { overflow:hidden位置：相对；top:5宽度：90%;高度：90%;边框式：实心；边框宽度：1;边框颜色： # 009900;}/style脚本语言=' JavaScript ' var strCOuntvar字符串颜色变化；定义变量字体；var SLine=' 0br/1br/0br/1br/0br/0br/1br/0br/1br/0br/'；函数onLoad(){ strCOunt=40；str=[]；color=[]；font=[]；颜色[0]=' # 002211 ';//文字的颜色颜色[1]=' # 003311 ';颜色[2]=' # 005511 ';颜色[3]=' # 008811 ';颜色[4]=' # 00bb 99 '；颜色[5]=' # 114411 ';color[6]=' # 335566 '；color[7]=' # 668899 '；颜色[8]=' # 99BBAA '；color[9]=' # CECECC '；font[0]=' 10px '；//文字的大小font[1]=' 12px '；font[2]=' 14px '；font[3]=' 16px '；font[4]=' 18px '；setTimeout('strik()'，50)；}函数strik(){ for(var I=0；istcounti){ if(type of(str[I])！='undefined') //如果字符串存在{ if(str[I][' Carch ']。风格。pixeltp heike。客户身高){ str[I][' Carch '].外套HTMl=删除字符串[i]["级别"];//删除数组元素删除字符串[i]['速度'];删除字符串[我][' Carch ']；删除字符串[一]；} else { str[I][' Carch ']。风格。pixeltp=str[I][' Speed ']；} } else if(Math.random()0.25) //随机小数{ str[I]=新数组()；str[I][' Level ']=数学。圆(数学。random()* 4)；字符串[I]['速度']=(数学。圆(数学。random()* str[I][' Level '])2)50；所有文件.insertAdjacentHTML('AfterBegin '，' SPAN id=' SPAN _ ' I ' ' ' SLine '/SPAN ')；str[I][' Carch ']=文档。全部[' SPAN _ ' I]；str[I][' Carch ']。风格。字号=Font[str[I][' Level ']；//字体str[I][' Carch ']。风格。位置='绝对'；//位置str[I][' Carch ']。风格。Pixelleft=数学。圆(数学。random()* heike。客户端宽度)；//x坐标str[I][' Carch ']。风格。Pixeltp=-str[I][' Carch '].偏右；//y坐标风格。Color=Color[str[I][' Level ']5]；//颜色str[I][' Carch ']。风格。滤镜='发光(Color=' Color[str[I][' Level ']'，强度=5 ')；//滤镜效果str[I][' Carch ']。风格。zindex=str[I][' Level ']；//z-Index } } setTimeout('strik()'，50)；}/scriptBODY onload='OnLoad()'表格宽度='100% '高度='100% '边框='0 '单元格间距='0 '单元格填充='0'trtd align='center '高度=' 100% ' div id=' heike '/div/TD/trtd align=' center ' style=' padd :5；font-size :9 pt' color: # FFFFFF '使用IE 6.0以上版本或以工业管理学(工业工程)为核心的浏览器浏览本页，1024*768分辨率为佳/td/tr/table /BODY/HTML提示：重点是对颜色和速度的随机设置JavaScript。中的"数学"对象用来提供数学运算，其中"数学，随机"用来获取一个0到一之间的随机数"数学。圆"是采用四舍五入方式取得最接近的整数。代码中使用了两维数组、"删除"方法用来删除数组中的元素。

（你可以自己去修改参数看看对应的效果，如：JS中关于文字下降速度控制的变量速度，可以将其调的大一些，让它更快些；还可以修改半铸钢钢性铸铁(铸造半钢)样式里溢出属性"溢出"取消隐藏，看看有多难看！)