纯jQuery实现的打字机的字幕效果，字体逐个输出到屏幕

原作出处：http://www.waaqi.com/archives/612.html

记得以前看电视的时候，电视里偶尔会出现文字一个紧接一个出现，伴随着打字机滴答滴答声音的字幕效果，常常好奇其实现效果。今天周末，没课就顺便想了想用javascript实现打字机效果。用了一个小时左右，就做出来，代码不过几十行。

先说下思路:一些典型的嵌套文字的html容器标签可以是这样:

< span >一行嵌套在span标签里的文字</ span >

< p >一段嵌套在p标记的文字</>

< div >一段嵌套在div标记里的文字</ div >

因此，我们首先要取得容器内部内容。这可以通过给容器赋id，然后用jquery的$(“#id”).html()方法获取到，并将获取到的内容赋与一字符串变量。接着设一方向向后，步长为1的游标，逐字判断，若是字符”<”跳过，这样做的目的是因为某些嵌套使用标签的情况存在，例如:

< span >嵌套使用< font   color = "red" >标签</ font >，这种情况下

应该跳过内层的标签，因为内层标签只是提供了一种表现形式</ span >

在这种情况下应该跳过内层的标签，因为它们只是提供了一种表现形式，不属于正文。所以此时游标应跳到下一个相应的”>”字符后一位的位置。最后我们使用substring()方法截取，对象是之前接收了标签内部内容的字符串变量，截取内容为起始位置到当前游标所在位置之间的一段文本。这样就能使文本内容逐渐变长。

当然了，因为要的是打字机效果，所以我们可以使用字符”_”来模拟一个光标。用字符串”_”和””来模拟光标的闪烁效果。这可以通过使用游标与1按位与来实现，因为游标向后游走的特性使得按位与的结果在0与1间变换，故而光标的闪烁效果也出来了，然后将光标附加在当前显示的文本内容尾部即可。

又因为要逐字判断字符类型，所以使用setInterval()方法作为定时器即可，这样做的好处还可以让我们自定义一个打字机的速度。如下图中 typewriter方法的名为speed的参数所示。当游标移动到内部内容的结束处时，不要忘了调用clearInterval()消除定时器。

整个函数的代码如下:

( function (a) {

a.fn.typewriter =  function (speed) {

this .each( function () {

var   d = a( this ),

c = d.html(),

b = 0;

d.html( "" );

var   e = setInterval( function () {

var   f = c.substr(b, 1);

if   (f ==  "<" ) {

b = c.indexOf( ">" , b) + 1

}  else   {

b++

}

d.html(c.substring(0, b) + (b & 1 ?  "_" :  "" ));

if   (b >= c.length) {

clearInterval(e)

}

},

speed)

});

return   this ;

}

})(jQuery);

用法很简单，举例如下:

< p   id = "p1" >一段嵌套在p标记的文字</ p > < p   id = "p2" >嵌套在p标记里的< span >标记</ span ></ p >

在html页面先引用jquery库，再引入typewriter js文件。然后调用方法:

$( "p1" ).typewriter(100);

$( "p2" ).typewriter(200);