001.
<%@page contentType=
"text/html"
pageEncoding=
"UTF-8"
%>
002.
<!DOCTYPE html>
003.
<html>
004.
<head>
005.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
006.
<title>การสร้าง Animation แบบ Matrix ให้กับอักษร</title>
007.
<style type=
"text/css"
>
008.
.matrix{
009.
font-family: Lucida Console,Courier,Monotype;
010.
font-size: 10pt;
011.
text-align: center;
012.
width: 50px;
013.
padding: 0px;
014.
margin: 0px;
015.
}
016.
</style>
017.
018.
<script language=
"JavaScript"
>
019.
var
rows=11;
020.
var
speed=1;
021.
var
appear=2;
022.
var
mTbl,matemp,mtbody,mRow,x,y,column,mText,mCho;
023.
var
m_coch=
new
Array();
024.
var
m_copo=
new
Array();
025.
026.
window.onload=
function
(){
027.
var
matrix=document.getElementById(
"matrixText"
);
028.
mText= matrix.firstChild.nodeValue;
029.
mText=
""
+mText+
""
;
030.
columns=mText.length;
031.
while
(matrix.childNodes.length)matrix.removeChild(matrix.childNodes[0]);
032.
mTbl=document.createElement(
"table"
);
033.
mTbl.setAttribute(
"border"
, 0);
034.
mTbl.setAttribute(
"align"
,
"left"
);
035.
mTbl.style.backgroundColor=
"#000000"
;
036.
mtbody=document.createElement(
"tbody"
);
037.
for
(x=0;x<rows;x++){
038.
mRow=document.createElement(
"tr"
);
039.
for
(y=0;y<columns;y++){
040.
matemp=document.createElement(
"td"
);
041.
matemp.setAttribute(
"id"
,
"Mx"
+x+
"y"
+y);
042.
matemp.className=
"matrix"
;
043.
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
044.
mRow.appendChild(matemp);
045.
}
046.
mtbody.appendChild(mRow);
047.
}
048.
mTbl.appendChild(mtbody);
049.
matrix.appendChild(mTbl);
050.
mCho=mText;
051.
052.
053.
054.
for
(x=0;x<columns;x++){
055.
mCho +=String.fromCharCode(32+Math.floor(Math.random()*94));
056.
m_copo[x]=0;
057.
}
058.
mtbody=setInterval(
"myMatrix()"
,speed);
059.
}
060.
061.
062.
063.
function
myMatrix(){
064.
x=0;
065.
for
(y=0;y<columns;y++){
066.
x=x+(m_copo[y]==100);
067.
mRow=m_copo[y]%100;
068.
if
(mRow&&m_copo[y]<100){
069.
if
(mRow<rows+1){
070.
matemp=document.getElementById(
"Mx"
+(mRow-1)+
"y"
+y);
071.
matemp.firstChild.nodeValue=m_coch[y];
072.
matemp.style.color=
"#33ff66"
;
073.
matemp.style.fontWeight=
"bold"
;
074.
}
075.
if
(mRow>1&&mRow<rows+2){
076.
matemp=document.getElementById(
"Mx"
+(mRow-2)+
"y"
+y);
077.
matemp.style.fontWeight=
"normal"
;
078.
matemp.style.color=
"#00ff00"
;
079.
}
080.
if
(mRow>2){
081.
matemp=document.getElementById(
"Mx"
+(mRow-3)+
"y"
+y);
082.
matemp.style.color=
"#009900"
;
083.
084.
}
085.
if
(mRow<Math.floor(rows/2)+1)m_copo[y]++;
086.
else
if
(mRow==Math.floor(rows/2)+1&&m_coch[y]==mText.charAt(y))matrixZoom(y);
087.
else
if
(mRow<rows+2)m_copo[y]++;
088.
else
if
(m_copo[y]<100)m_copo[y]=0;
089.
}
else
if
(Math.random()>0.9 && m_copo[y]<100){
090.
m_coch[y]=mCho.charAt(Math.floor(Math.random()*mCho.length));
091.
m_copo[y]++;
092.
}
093.
}
094.
if
(x==columns) clearInterval(mtbody);
095.
}
096.
097.
098.
function
matrixZoom(ycol){
099.
var
mtmp,mtem,ytmp;
100.
if
(m_copo[ycol]==Math.floor(rows/2)+1){
101.
for
(ytmp=0;ytmp<rows;ytmp++){
102.
103.
mtmp=document.getElementById(
"Mx"
+ytmp+
"y"
+ycol);
104.
mtmp.firstChild.nodeValue=m_coch[ycol];
105.
mtmp.style.color=
"33ff66"
;
106.
mtmp.style.fontWeight=
"bold"
;
107.
108.
}
109.
if
(Math.random()<appear){
110.
mtmp=mCho.indexOf(mText.charAt(ycol));
111.
mCho=mCho.substring(0, mtmp)+mCho.substring(mtmp+1, mCho.length);
112.
}
113.
114.
if
(Math.random()<appear-1)mCho=mCho.substring(0, mCho.length-1);
115.
m_copo[ycol]+=199;
116.
117.
118.
}
119.
120.
else
if
(m_copo[ycol]>200){
121.
122.
123.
mtmp=document.getElementById(
"Mx"
+(m_copo[ycol]-201)+
"y"
+ycol);
124.
mtmp=document.getElementById(
"Mx"
+(200+rows-m_copo[ycol]--)+
"y"
+ycol);
125.
mtmp.style.fontWeight=
"normal"
;
126.
mtem.style.fontWeight=
"normal"
;
127.
128.
129.
}
130.
131.
else
if
(m_copo[ycol]==200)m_copo[ycol]=100+Math.floor(rows/2);
132.
133.
if
(m_copo[ycol]>100 && m_copo[ycol]<200){
134.
mtmp=document.getElementById(
"Mx"
+(m_copo[ycol]-101)+
"y"
+ycol);
135.
mtmp.firstChild.nodeValue= String.fromCharCode(160);
136.
mtmp=document.getElementById(
"Mx"
+(100+rows-m_copo[ycol]--)+
"y"
+ycol);
137.
mtem.firstChild.nodeValue= String.fromCharCode(160);
138.
mtem.innerHTML=String.fromCharCode(160);
139.
}
140.
setTimeout(
"matrixZoom("
+ycol+
")"
, speed);
141.
142.
}
143.
</script>
144.
</head>
145.
<body>
146.
<center>
147.
<div id=
"matrixText"
> Java script</div></center>
148.
</body>
149.
</html>