jQuery实现的打字机字幕效果,可设置打字速度

发布时间：2018-08-26 07:44:03 所属栏目：业界来源：站长网

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

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

先说下思路:一些典型的嵌套文字的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标签而跳过。

请看效果：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery打字机效果_烈火网</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/typewriter.js"> (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); </script> <script type="text/javascript"> $(function(){ $("#font1").typewriter(/*speed*/200);　// 设置打字速度 }); </script> </head> <body> <font id="font1">摘要：中国科协一项调查显示：科研资金用于项目本身仅占40%左右，大量科研经费流失在项目之外。早几年，中国科技投入不足，是制约科技创新的一大瓶颈。如今钱到位了，但是有限的钱却没有花在刀刃上，成了部分科研人员的“圈钱”法宝，甚至有的专家，给钱不要，送什么都不要，最后给他安排了女色，才肯签字。科研经费被肆意侵占挥霍，在科研圈内早已不是秘密。　一个月前，财政部、科技部发出《关于调整国家科技计划和公益性行业科研专项经费管理办法若干规定的通知》，《通知》的核心内容，是要强化预算编制、严格评估评审，结余资金上交。同时，对非涉密课题预算进行公示，探索课题绩效的公示制度。 “头痛医脚，脚痛医头，纯粹走过场的，下多少个通知也没用。”10月30日，中国社科院西部地区某研究所任高（化名）表示，科研经费怎么花，实际上都是公开的秘密。作为一名老科研人员，任高对于科技界一些潜规则颇感无奈。她说，大家都这么做，你不做，就显得另类了，再者领导也不会相信你。科研经费的使用，诸如扩大开支范围、擅自调整预算、突击购买设备等屡见不鲜。2010年，仅国家审计署查出的资金就达数亿元。中国科协一项调查显示：科研资金用于项目本身仅占40%左右，大量科研经费流失在项目之外。接受本报采访的一名不愿意透露姓名的中科院院士表示，早几年，中国科技投入不足，是制约科技创新的一大瓶颈。如今钱到位了，但是有限的钱却没有花在刀刃上，成了部分科研人员的“圈钱”法宝。海淀区检察院一要求匿名的工作人员称，2003年至今，该院共立案侦查科研经费领域职务犯罪17件，涉案人员21人，其中，贪污、挪用类犯罪较为集中，涉案人员不少为高级知识分子。 </font> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

来源：http://tudas.cnblogs.com/

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

壹号本新款 ONE XPLAY	特斯拉前 CTO 电动汽车
华硕公布新款天选3 搭	主流显卡最新场批价曝