jquery typewriter 打字机效果

转http://www.cnblogs.com/tudas/archive/2011/11/05/typewriter.html

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

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

1 <span>一行嵌套在span标签里的文字</span>
2 <p>一段嵌套在p标记的文字</>
3 <div>一段嵌套在div标记里的文字</div>

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

1 <span>嵌套使用<font color="red">标签</font>,这种情况下
2 应该跳过内层的标签,因为内层标签只是提供了一种表现形式</span>

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

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

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

整个函数的代码如下:

jquery typewriter 打字机效果
1 (function(a) {
 2     a.fn.typewriter = function(speed) {
 3         this.each(function() {
 4             var d = a(this),
 5             c = d.html(),
 6             b = 0;
 7             d.html("");
 8             var e = setInterval(function() {
 9                 var f = c.substr(b, 1);
10                 if (f == "<") {
11                     b = c.indexOf(">", b) + 1
12                 } else {
13                     b++
14                 }
15                 d.html(c.substring(0, b) + (b & 1 ? "_": ""));
16                 if (b >= c.length) {
17                     clearInterval(e)
18                 }
19             },
20             speed)
21         });
22         return this;
23     }
24 })(jQuery);
jquery typewriter 打字机效果

用法很简单,举例如下:

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

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

1 $("p1").typewriter(100); 
2 $("p2").typewriter(200);

即可。

    请看效果:http://www.wandouyouxi.com/cnblogs/typewreiterDemo/demo.html

    demo下载:http://www.wandouyouxi.com/cnblogs/typewreiterDemo.zip

    值得注意的是:如果文本内容包括字符"<"和">",则显示不出来,因为方法会将它们当作html标签而跳过。

文章最后,谢谢各位阅读。如转载,请注明出处。

相关推荐