先说下思路:一些典型的嵌套文字的html容器标签可以是这样:
1 <font>一行嵌套在font标签里的文字</font>
2 <p>一段嵌套在p标记的文字</>
3 <div>一段嵌套在div标记里的文字</div>
因此，我们首先要取得容器内部内容。这可以通过给容口赋id，然后用jquery的$("#id").html()方法获取到，并将获取到的内容赋与一字符串变量。接着设一方向向后，步长为1的游标，逐字判断，若是字符"<”跳过，这样做的目的是因为某些嵌套使用标签的情况存在，例如:
1 <font>嵌套使用<font color="red">标签</font>，这种情况下
2 应该跳过内层的标签，因为内层标签只是提供了一种表现形式</font>
在这种情况下应该跳过内层的标签，因为它们只是提供了一种表现形式，不属于正文。所以此时游标应跳到下一个相应的">"字符后一位的位置。最后我们使用substring()方法截取，对象是之前接收了标签内部内容的字符串变量，截取内容为起始位置到当前游标所在位置之间的一段文本。这样就能使文本内容逐渐变长。
当然了，因为要的是打字机效果，所以我们可以使用字符"_"来模拟一个光标。用字符串"_"和""来模拟光标的闪烁效果。这可以通过使用游标与1按位与来实现，因为游标向后游走的特性使得按位与的结果在0与1间变换，故而光标的闪烁效果也出来了，然后将光标附加在当前显示的文本内容尾部即可。
又因为要逐字判断字符类型，所以使用setInterval()方法作为定时器即可，这样做的好处还可以让我们自定义一个打字机的速度。如下图中typewriter方法的名为speed的参数所示。当游标移动到内部内容的结束处事，不要忘了调用clearInterval()消除定时器。
整个函数的代码如下:
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 <p id="p1">一段嵌套在p标记的文字</p>
2 <p id="p2">嵌套在p标记里的<font>标记</font></p>
在html页面先引用jquery库，再引入typewriter js文件。然后调用方法:
1 $("p1").typewriter(100);
2 $("p2").typewriter(200);即可。
值得注意的是:如果文本内容包括字符"<"和">"，则显示不出来，因为方法会将它们当作html标签而跳过。
请看效果：
提示：可修改后代码再运行!
来源：http://tudas.cnblogs.com/
程序员人生，我编程，我富裕，记住wfuyu网，php教程，php学习，php手册，CMS模版制作
声明：本站大部分内容是作者原创，少部分收集于互联网供大家一起学习，原版权很多不明，如有侵权请联系本站，谢谢！
粤ICP备14040726号-1 2015-2020 程序员人生 版权所有
