代码一:
黑客帝国文字下落效果
查看效果 源码下载
源代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝国文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} #divList {width:800px; height:500px; border:solid 3px gray; margin: 0px auto; overflow:hidden; position: relative;} .divText {position: absolute;} .divText span {display:block; font-weight: bold; font-family:Courier New; } </style> <script src="/UploadFiles/2021-04-02/jquery.min.js">代码二:
在一个JS的学习资料上,看到一个关于黑客帝国文字下落的特效!挺好玩的,贴个源码分享一下!
<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 = "0<br/>1<br/>0<br/>1<br/>0<br/>0<br/>1<br/>0<br/>1<br/>0<br/>"; 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"]; //删除数组元素 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) //随机小数 { str[i] = new Array(); str[i]["Level"] = Math.round(Math.random()*4); str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"]) <<2)+50; 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”对象用来提供数学运算,其中“Math.random”用来获取一个0到1之间的随机数。“Math.round”是采用四舍五入方式取得最接近的整数。代码中使用了两维数组,“delete”方法用来删除数组中的元素。
( 你可以自己去修改参数看看对应的效果,如:JS中关于文字下降速度控制的变量Speed,可以将其调的大一些,让它更快些;还可以修改CSS样式里溢出属性“overflow”取消隐藏,看看有多难看!。。。。。)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS实现黑客帝国文字下落效果”评论...
更新动态
2024年11月13日
2024年11月13日
- 宝可梦大集结开服5选1礼包怎么选 新手5选1宝可梦推荐
- 劳斯莱斯女车主丈夫坦言拒赔原因:确实有流量因素
- 《心灵杀手2》PS5 Pro实机演示:质量模式4K 30帧
- 玩家分享买二手盘暖心经历:盘上还有小贴纸表达感谢
- 殷秀梅.2014-沁园春·雪【太平洋影音】【WAV+CUE】
- 范玮琪.2003-真善美【福茂】【WAV+CUE】
- 陈雷.1995-烧翻卖【金圆唱片】【WAV+CUE】
- 乱石堆中一粒砂金——《使命召唤21》评测
- 【果娘聊天室】双11即将结束,各位今年买了啥?
- 双十一必入爆款:微星MPGZ890 EDGE TI刀锋钛主板评测
- 侃侃《植觉DSD》[低速原抓WAV+CUE]
- 摇滚乐.FlorenceandTheMachine-HowBig,HowBlue,HowBeautiful(2015)[96-24]FLAC
- 黑鸭子2008《听·好女人心》2CD[限量版][WAV+CUE]
- 孟庭苇《月亮说话》24K Gold 日本壓碟[WAV+CUE][1G]
- 齐秦《齐秦精选》环球 K2HD版 [低速原抓WAV+CUE][1G]