JS实现打字机式字符输出效果 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>JS打字机风格的字符输出特效</title> 
<SCRIPT language="JavaScript"> 
<!-- 
 var layers = document.layers, style = document.all, both = layers || style, 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( 
 "<font color=red size=3>欢迎来到源码爱好者...</font><br><font color=green size=3>她为我们提供各类编程源码、素材、书籍教程、设计模板、网页特效代码以及常用软件下载。</font><br><font color=blue size=3>是一个有质量的学习型源码下载站。</font>" 
 ); 
 var overMe=0; 
 function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) { 
   var tmp0 = tmp1 = '', skip = 0; 
     if (both && idx <= str.length) { 
  if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; } 
  if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; } 
  tmp0 = str.slice(0,idx); 
  tmp1 = 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(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>"); 
  setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay); 
   } 
 } 
 
 function init() { 
  txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 50, 0); 
 } 
 // --> 
</SCRIPT> 
</head> 
<body bgcolor="#fef4d9" onload="init()"> 
<DIV class=ttl1 id=ttl0><SPAN class=ttl1></SPAN></DIV> 
</body> 
</html>

　　

 

posted @ 2014-08-10 10:05  商商-77  阅读(315)  评论(0)    收藏  举报