复古JavaScript打字效果
本文介绍了一个使用纯JavaScript实现的动态打字效果案例，通过逐字符显示文本的方式增强页面交互感。该效果能够处理HTML标签，并支持不同颜色的文本显示。
1
<script language=javascript>
2var layers =document.layers,style=document.all,both=layers||style,idme=908601;
3
if(layers)
{layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef =
4
'.style';}
5function writeOnText(obj,str){
6
if(layers)with(document[obj]){ document.open();document.write(str);document.close();}
7if(style)eval(obj+'.innerHTML=str'); }
8var dispStr=new Array("从小父母就教育我要诚实，所以我必须承认我长得很帅。但是孔老夫子说过，以貌取人是不对的，所以你千万不要因为我长得帅而喜欢我。<br><br>葡萄美酒夜光杯，欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回！<br><br>红尘过客，几度相思，几曲闲愁..我为谁思? 苍茫尘世，几许伤悲，几多忧愁..我为谁累?");
9var overMe=0;
10function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){
11
var tmp0=tmp1= '',skip=100;
12if (both && idx<=str.length) {
13if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;idx++;}
14if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;idx++;}
15tmp0 = str.slice(0,idx);
16tmp1 = str.charAt(idx++);
17if (overMe==0 && plysnd==1){
18if (navigator.plugins[0]){
19if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds
20[0].stop();
21
setTimeout("document.embeds[0].play(false)",100);}
22} else if (document.all){
23ding.Stop();
24setTimeout("ding.Run()",100);}
25overMe=1;}else overMe=0;
26writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2
27+"'>"+tmp1+"</font></span>");
28setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);}}
29function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', 'red', '#99FF33', 300, 0);}
30</script>
31<DIV class=ttl1 id=ttl0></DIV>
32<body bgcolor="#fef4d9" onload=init()>
<script language=javascript>2
var layers =document.layers,style=document.all,both=layers||style,idme=908601;3
if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = 4
'.style';}5
function writeOnText(obj,str){6
if(layers)with(document[obj]){ document.open();document.write(str);document.close();}7
if(style)eval(obj+'.innerHTML=str'); }8
var dispStr=new Array("从小父母就教育我要诚实，所以我必须承认我长得很帅。但是孔老夫子说过，以貌取人是不对的，所以你千万不要因为我长得帅而喜欢我。<br><br>葡萄美酒夜光杯，欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回！<br><br>红尘过客，几度相思，几曲闲愁..我为谁思? 苍茫尘世，几许伤悲，几多忧愁..我为谁累?");9
var overMe=0;10
function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){11
var tmp0=tmp1= '',skip=100;12
if (both && idx<=str.length) {13
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;idx++;}14
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;idx++;}15
tmp0 = str.slice(0,idx);16
tmp1 = str.charAt(idx++);17
if (overMe==0 && plysnd==1){18
if (navigator.plugins[0]){19
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds20
[0].stop();21
setTimeout("document.embeds[0].play(false)",100);}22
} else if (document.all){23
ding.Stop();24
setTimeout("ding.Run()",100);}25
overMe=1;}else overMe=0;26
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr227
+"'>"+tmp1+"</font></span>");28
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);}}29
function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', 'red', '#99FF33', 300, 0);}30
</script>31
<DIV class=ttl1 id=ttl0></DIV>32
<body bgcolor="#fef4d9" onload=init()>
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
