jquery typewriter 打字机成效

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);

用法很简单，举例如下:

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标签而跳过。

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