?? 9.5.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>文字墜落顯示</title>
</head>
<body>
<h1>文字墜落顯示效果</h1><hr>
<form name="hey">
<input type="button" name="start" value="開始顯示" onclick="drip()"><br><br>
<input type="text" name="a" size=30 style="border-style: double; border-width: 0; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"><br>
<input type="text" name="b" size=30 style="border-style: double; border-width: 0; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"><br>
<input type="text" name="c" size=30 style="border-style: double; border-width: 0; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"><br>
<input type="text" name="d" size=30 style="border-style: double; border-width: 0; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px"><br><br>
</form>
<script language="JavaScript">
<!--
function drip(){
wordy="大江東去，浪淘盡，千古風流人物。"; //墜落的文字
document.hey.a.value=""; //設置每個文本框中的文字均為空
document.hey.b.value=""; //設置每個文本框中的文字均為空
document.hey.c.value=""; //設置每個文本框中的文字均為空
document.hey.d.value=""; //設置每個文本框中的文字均為空
word="";beat=0;aa=0;bb=0;cc=0;dd=0;lo=wordy.length; //設置變量
drop(); //調用drop函數
}
function drop(){
if(beat<=lo*3+1){ //如果在范圍之內
beat=beat+1;
if(beat<=1){ //顯示文字在第一層（最上面一層）
document.hey.a.value=wordy;
}
if(beat>1&&beat<=lo+1){ //文字從第一層落入第二層
fin=""; //定義空格
aa=aa+1; //定義落入第二層的文字的個數
for(var x=0;x<=aa-1;x++){
fin=fin+" "; //前面空格的個數
}
fin=fin+wordy.substring(aa,lo); //第一層要顯示的字符串
document.hey.a.value=fin; //顯示第一層
document.hey.b.value=wordy.substring(0,aa); //顯示第二層
}
if(beat>lo+1&&beat<=lo*2+1){ //文字從第二層落入第三層
fin=""; //定義空格
bb=bb+1; //定義落入第三層的文字的個數
for(var x=0;x<=bb-1;x++){
fin=fin+" "; //前面空格的個數
}
fin=fin+wordy.substring(bb,lo) //第二層要顯示的字符串;
document.hey.b.value=fin; //顯示第二層
document.hey.c.value=wordy.substring(0,bb); //顯示第三層
}
if(beat>lo*2+1&&beat<=lo*3+1){ //文字從第三層落入第四層
fin=""; //定義空格
cc=cc+1; //定義落入第四層的文字的個數
for(var x=0;x<=cc-1;x++){
fin=fin+" "; //前面空格的個數
}
fin=fin+wordy.substring(cc,lo); //第三層要顯示的字符串;
document.hey.c.value=fin; //顯示第三層
document.hey.d.value=wordy.substring(0,cc); //顯示第四層
}
setTimeout("drop()",200); //定義動畫的速度
}
else{
document.hey.d.value=wordy; //結束將所有字符顯示在第四層
}
}
//-->
</script>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -