太阳集团娛乐城所有网址_太阳网城官网
<nobr id="z799b"></nobr>
<b id="z799b"><del id="z799b"></del></b>
    <b id="z799b"><strike id="z799b"></strike></b>

      <dfn id="z799b"></dfn>

      <ins id="z799b"></ins>

      当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现文字的打字效果

      JS实现文字的打字效果

      2012/10/20 16:19:52作者:佚名来源:软件学堂

      移动端

      【实例名称】

      文字的打字效果

      【实例描述】

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


      【实例代码】

         <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代码下载

      太阳集团娛乐城所有网址_太阳网城官网