软件学堂

网游分类软件分类

JS实现文字的打字效果

2012-10-20 来源:网络

【实例名称】

文字的打字效果

【实例描述】

打字效果是将一段文本逐个文字地显示,实现打字的效果。本例学习如何制作这样的特效。


【实例代码】

   <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>标题页</title>  <script language=javascript> var layers =document.layers; var style=document.all; var both=layers||style; var idme=908601; if(layers) { layerRef='document.layers';styleRef ='';} if(style) { layerRef='document.all';styleRef = '.style';} //开始参数的定义 function writeOnText(obj,str) { if(layers)with(document[obj]) { document.open();document.write(str);document.close();} if(style)eval(obj+'.innerHTML=str');  } var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本 var overMe=0; //逐字显示的方法 function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd) { var mystr='',strchar=''; var skip=200; if (both && idx<=str.length) { if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;} if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;} mystr = str.slice(0,idx);   //返回数组从开始到指定位置的字符串 strchar = str.charAt(idx++);//当前地址的字符 if (overMe==0 && plysnd==1) { //针对浏览器的不同,调用不同的显示方法 if (navigator.plugins[0]){ if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {document.embeds[0].stop(); setTimeout("document.embeds[0].play(false)",100);} } else if (document.all){ ding.Stop(); setTimeout("ding.Run()",100);} overMe=1;}else overMe=0; writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2 +"'>"+strchar+"</font></span>"); setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}} function init() {txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);} </script>

需要在body中,添加一个div,代码如下所示: <BODY onload=init()> <DIV class=style1 id=div1></DIV> </BODY> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点其实是实现这种效果的思路,代码并不是关键。在本例中,要实现一段文本的打字特效,首先将这段文本放在数组中,然后利用两个变量,实现打字和显示的效果,“打字”变量只是显示光标当前的某个字符,而“显示”变量则显示当前光标前所有的字符。

【源码下载】

本实例JS代码下载

上一篇:PS图片处理技巧:制作中国美女画卷
下一篇:JS代码实现文字滚动

相关文章