JS仿黑客帝國文字下落特效

2024-09-05 12:21:39

字體：大中小

來源：轉載

供稿：網友

看過黑客帝國的朋友或許都對開頭的字幕效果很熟悉，自從影片播放以來，網頁設計者有不少都在模仿這種文字下落的效果，而且還有文字漸變效果，對我們學習研究JS還是挺有幫助的哦。

<HTML><HEAD><TITLE>文字下落效果</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9><CENTER>文字下落效果</CENTER><BR><CENTER><TABLE borderColor=#9900FF border=5 borderlight="green">  <TBODY>  <TR>    <TD align=middle>      <STYLE type=text/css>.matrix {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10pt; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 10px; PADDING-TOP: 0px; FONT-FAMILY: Lucida Console, Courier, Monotype; TEXT-ALIGN: center}</STYLE><SCRIPT language=JavaScript type=text/javascript>var rows=11; // must be an odd numbervar speed=50; // lower is fastervar reveal=2; // between 0 and 2 only. The higher, the faster the word appearsvar effectalign="default" //enter "center" to center it.var w3c=document.getElementById && !window.opera;;var ie45=document.all && !window.opera;var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;var m_coch=new Array();var m_copo=new Array();window.onload=function() {	if (!w3c && !ie45) return  var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];  ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;  ma_txt=" "+ma_txt+" ";  columns=ma_txt.length;  if (w3c) {    while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);    ma_tab=document.createElement("table");    ma_tab.setAttribute("border", 0);    ma_tab.setAttribute("align", effectalign);    ma_tab.style.backgroundColor="#000000";    ma_bod=document.createElement("tbody");    for (x=0; x<rows; x++) {      ma_row=document.createElement("tr");      for (y=0; y<columns; y++) {        matemp=document.createElement("td");        matemp.setAttribute("id", "Mx"+x+"y"+y);        matemp.className="matrix";        matemp.appendChild(document.createTextNode(String.fromCharCode(160)));        ma_row.appendChild(matemp);      }      ma_bod.appendChild(ma_row);    }    ma_tab.appendChild(ma_bod);    matrix.appendChild(ma_tab);  } else {    ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';    for (var x=0; x<rows; x++) {      ma_tab+='<t'+'r>';      for (var y=0; y<columns; y++) {        ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';      }      ma_tab+='</'+'tr>';    }    ma_tab+='</'+'table>';    matrix.innerHTML=ma_tab;  }  ma_cho=ma_txt;  for (x=0; x<columns; x++) {    ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));    m_copo[x]=0;  }  ma_bod=setInterval("mytricks()", speed);}function mytricks() {  x=0;  for (y=0; y<columns; y++) {    x=x+(m_copo[y]==100);    ma_row=m_copo[y]%100;    if (ma_row && m_copo[y]<100) {      if (ma_row<rows+1) {        if (w3c) {          matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);          matemp.firstChild.nodeValue=m_coch[y];        }        else {          matemp=document.all["Mx"+(ma_row-1)+"y"+y];          matemp.innerHTML=m_coch[y];        }        matemp.style.color="#33ff66";        matemp.style.fontWeight="bold";      }      if (ma_row>1 && ma_row<rows+2) {        matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];        matemp.style.fontWeight="normal";        matemp.style.color="#00ff00";      }      if (ma_row>2) {          matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];        matemp.style.color="#009900";      }      if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;      else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);      else if (ma_row<rows+2) m_copo[y]++;      else if (m_copo[y]<100) m_copo[y]=0;    }    else if (Math.random()>0.9 && m_copo[y]<100) {      m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));      m_copo[y]++;    }  }  if (x==columns) clearInterval(ma_bod);}function zoomer(ycol) {  var mtmp, mtem, ytmp;  if (m_copo[ycol]==Math.floor(rows/2)+1) {    for (ytmp=0; ytmp<rows; ytmp++) {      if (w3c) {        mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);        mtmp.firstChild.nodeValue=m_coch[ycol];      }      else {        mtmp=document.all["Mx"+ytmp+"y"+ycol];        mtmp.innerHTML=m_coch[ycol];      }      mtmp.style.color="#33ff66";      mtmp.style.fontWeight="bold";    }    if (Math.random()<reveal) {      mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));      ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);    }    if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);    m_copo[ycol]+=199;    setTimeout("zoomer("+ycol+")", speed);  }  else if (m_copo[ycol]>200) {    if (w3c) {      mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);      mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);    }    else {      mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];      mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];    }    mtmp.style.fontWeight="normal";    mtem.style.fontWeight="normal";    setTimeout("zoomer("+ycol+")", speed);  }  else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);  if (m_copo[ycol]>100 && m_copo[ycol]<200) {    if (w3c) {      mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);      mtmp.firstChild.nodeValue=String.fromCharCode(160);      mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);      mtem.firstChild.nodeValue=String.fromCharCode(160);    }    else {      mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];      mtmp.innerHTML=String.fromCharCode(160);      mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];      mtem.innerHTML=String.fromCharCode(160);    }    setTimeout("zoomer("+ycol+")", speed);  }}// --></SCRIPT><div   class="h9l3tb9"   id=matrix>I love shenlong</DIV></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：火熱的文字特效代碼-高閃亮字

下一篇：仿百度搜索框自動補全智能提示效果