jquery实现的打字机字幕效果

记得以前看电视的时候，电视里偶尔会出现文字一个紧接一个出现，伴随着打字机滴答滴答声音的字幕效果，常常好奇其实现效果。今天周末，没课就顺便想了想用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()消除定时器。

整个函数的代码如下:

 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) + 112                 } 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标记里的<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标签而跳过。

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

转载于:https://www.cnblogs.com/tudas/archive/2011/11/05/typewriter.html

jquery实现的打字机字幕效果相关推荐

【FCPX插件】56种标题文本输入逐字出现字幕打字机动画效果 Typing Titles，支持M1芯片！
[FCPX插件]56种标题文本输入逐字出现字幕打字机动画效果 Typing Titles,支持M1芯片! 在制作视频的时候,我们会经常用到字幕,那怎么样制作一个带有打字效果的字幕呢?这里我们可以借助插 ...
html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
Jquery JQZoom Plugin 放大鏡效果 Two
Jquery JQZoom Plugin 放大鏡效果 Two Jquery1.3.2Lib下載地址:http://files.cnblogs.com/davidzhou/jquery-1.3.2.ra ...
jQuery实现自动左右滚动效果的代码实例
2019独角兽企业重金招聘Python工程师标准>>> jQuery实现自动左右滚动效果的代码实例思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展 ...
类似QQ管家页面jquery图片显隐轮换效果
一晃端午节又过去了,又得开始新的工作累人啊. 这两天jquery博客有不少感慨,感觉人有时要是言而无信,那不管做什么事情都不会成功的,觉得,既然说出口了,或者,暗暗下决心做了,就一定做成功.如果不行, ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
用jQuery实现网页卷轴的效果
用jQuery实现网页卷轴的效果:http://www.56mp.cn/UPLOAD/SmoothPageScroll/ jQuery有能力做出这样的动画滚动,利用其动画功能和" scrol ...
深入学习jQuery的三种常见动画效果
前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...
图片向上滚动字幕代码html,如何通过制作滚动字幕的软件实现这种片尾的向上滚动字幕效果...
如何制作滚动字幕特殊滚动类字幕制作向上向下向左向右滚动字幕制作效果含拖动和消失全程真是酷B了爽呆了,赶快学习吧! 电影.连续剧等影视作品片尾,都会在播放片尾曲时,出现向上滚动的字幕,显示演员表 ...

jquery实现的打字机字幕效果

jquery实现的打字机字幕效果相关推荐

最新文章

热门文章