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

标签：文字

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

热门软件/ 推荐游戏/ 手机软件

JS实现文字的打字效果

资讯分类

推荐教程

精品软件推荐