JS實(shí)現(xiàn)黑客帝國(guó)文字下落效果
代碼一:
黑客帝國(guó)文字下落效果
源代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝國(guó)文字下落</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="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <h1 style="text-align:center; color:gray;">黑客帝國(guó)文字下落 (<span id="spanCount">0</span>)</h1> <div id="divList"> </div> <script> function rand(min, max) { return min + Math.round(Math.random() * (max - min)); } function add() { var x = rand(0, 800); var html = '<div class="divText" style="left:' + x + 'px; bottom:500px;">'; /* var color1 = []; var color2 = []; var color3 = []; var color4 = []; var color5 = []; var color6 = []; for (var i=1; i<17; i++) { var f = i.toString(16); color1.push('0' + f + '0'); color2.push(f + '00'); color3.push('00' + f); color4.push('0' + f + f); color5.push(f + f + '0'); color6.push(f + '0' + f); } var color = [color1, color2, color3, color4, color5, color6]; var ci = rand(0, 5); */ var color = []; for (var i=1; i<17; i++) { var f = i.toString(16); color.push('0' + f + '0'); } var fontSize = rand(9, 24); for (var i=1; i<17; i++) { var c = rand(33, 127); var c = String.fromCharCode(c); // html += '<span class="s' + i + '" style="color:#' + color[ci][i-1] + '; font-size:' + fontSize + 'px;">' + c + '</span>'; html += '<span class="s' + i + '" style="color:#' + color[i-1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i-1] + ';">' + c + '</span>'; } html += '</div>'; $('#divList').append(html); } function run() { var x = rand(0, 100); if (x < 100) { add(); } $('#spanCount').html($('.divText').size()); $('.divText').each(function(){ var y = $(this).css('bottom'); y = parseInt(y); y -= $(this).find('span').eq(0).height(); $(this).css('bottom', '' + y + 'px'); if (y + $(this).height() <= 0) { $(this).remove(); return; } $(this).find('span').each(function(){ var c = rand(33, 127); var c = String.fromCharCode(c); $(this).html(c); }); }); window.setTimeout(run, 100); } run(); </script> </body> </html>
代碼二:
在一個(gè)JS的學(xué)習(xí)資料上,看到一個(gè)關(guān)于黑客帝國(guó)文字下落的特效!挺好玩的,貼個(gè)源碼分享一下!
<HTML> <HEAD> <TITLE>《黑客帝國(guó)》中的字符下落效果</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"]; //刪除數(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) //隨機(jī)小數(shù) { 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坐標(biāo) str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight; //y坐標(biāo) 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>
提示:重點(diǎn)是對(duì)顏色和速度的隨機(jī)設(shè)置。JavaScript中的“Math”對(duì)象用來提供數(shù)學(xué)運(yùn)算,其中“Math.random”用來獲取一個(gè)0到1之間的隨機(jī)數(shù)。“Math.round”是采用四舍五入方式取得最接近的整數(shù)。代碼中使用了兩維數(shù)組,“delete”方法用來刪除數(shù)組中的元素。
( 你可以自己去修改參數(shù)看看對(duì)應(yīng)的效果,如:JS中關(guān)于文字下降速度控制的變量Speed,可以將其調(diào)的大一些,讓它更快些;還可以修改CSS樣式里溢出屬性“overflow”取消隱藏,看看有多難看!。。。。。)
相關(guān)文章
javascript代碼實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript代碼實(shí)現(xiàn)簡(jiǎn)易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01JavaScript中附件預(yù)覽功能實(shí)現(xiàn)詳解(推薦)
這篇文章主要介紹了JavaScript中附件預(yù)覽功能的實(shí)現(xiàn),具體操作步驟大家可查看下文詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08JS動(dòng)態(tài)改變?yōu)g覽器標(biāo)題的方法
這篇文章主要介紹了JS動(dòng)態(tài)改變?yōu)g覽器標(biāo)題的方法,涉及JavaScript頁面元素結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04Wordpress ThickBox 點(diǎn)擊圖片顯示下一張圖的修改方法
Wordpress自帶的ThickBox特效中,單擊圖片會(huì)調(diào)用 tb_remove 以關(guān)閉特效窗口,現(xiàn)將修改其動(dòng)作為顯示下一張圖。2010-12-12JavaScript版DateAdd和DateDiff函數(shù)代碼
VBScript中有兩個(gè)非常好用的日期操作函數(shù):DateAdd用來給日期添加指定時(shí)間間隔,DateDiff用來返回兩個(gè)日期的時(shí)間間隔??上У氖荍avaScript沒有,不過我們可以寫一個(gè)函數(shù)來實(shí)現(xiàn),一樣的,呵呵2012-03-03Javascript+CSS實(shí)現(xiàn)影像卷簾效果思路及代碼
Arcmap里面的一個(gè)卷簾效果肯定記憶很深刻,我也對(duì)這種比較炫的卷簾效果做了一下研究,現(xiàn)在給大家匯報(bào)下結(jié)果2014-10-10深入理解javascript嚴(yán)格模式(Strict Mode)
Strict mode是JavaScript1.8.5引進(jìn)的技術(shù),但還沒有瀏覽器確實(shí)可靠的實(shí)現(xiàn)了嚴(yán)格模式,所以使用時(shí)要小心并且多測(cè)試。Strict mode可以應(yīng)用于整個(gè)腳本,也可以適合于單個(gè)函數(shù)。2014-11-11下載網(wǎng)站打開頁面后間隔多少時(shí)間才顯示下載鏈接地址的代碼
有時(shí)候可能為了一些更好的廣告效果等原因,需要讓用戶等待一段時(shí)間以后,再顯示真實(shí)下載地址代碼,有利于緩解服務(wù)器壓力。2010-04-04