jQuery实现的打字机字幕结果,可配置打字速率

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

导读：记得早年看电视的时辰，电视里无意会呈现笔墨一个紧接一个呈现，陪伴着打字机滴答滴答声音的字幕结果，经常好奇着实现结果。本日周末，没课就趁便想了想用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/

（编辑：湖南网）

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

宏光MINI GAMEBOY全面	美国初创公司Aquarian
新一代汽车芯片的设计	显示器常见背光种类盘