利用jQuery实现打字机字幕效果实例代码

实现效果：

实现原理：

把html里的代码读进来，

然后跳过“<”和“>”之间的代码，

顺便保存了内容的格式，

然后一个定时器，逐个输出。
用到的基础知识：

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend（object）;

jQuery.extend（object）;
jQuery.extend（object）; 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend（object）;给jQuery对象添加方法。

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。

如扩展$.fn.abc（）

那么你可以这样子：$（"#div"）.abc（）;
$.fx是指jquery的特效。

如使用显示、滑动、淡入淡出、动画等。

$.fx.off可以关闭动画，其实是直接显示结果。
实现代码：

<！DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="keyword" content=""><meta name="description" content=""></head><body><div class="autotype" id="autotype"><p>一场雨把我困在这里</p><br/><p>你温柔的表情</p><p>会让我伤心</p><br/><p>六月的雨，只是无情的你~</p></div><script src="http://file2.ci123.com/ast/js/jquery_172.js"></script><script>$.fn.autotype = function（）{var $text = $（this）;console.log（"this",this）;var str = $text.html（）;//返回被选 元素的内容var index = 0;var x = $text.html（""）;//$text.html（）和$（this）.html（""）有区别var timer = setInterval（function（）{//substr（index, 1） 方法在字符串中抽取从index下标开始的一个的字符var current = str.substr（index, 1）;if（current == "<"）{//indexOf（） 方法返回">"在字符串中首次出现的位置。index = str.indexOf（">", index） + 1;}else{index ++ ;}//console.log（["0到index下标下的字符",str.substring（0, index）],["符号",index & 1 ? "_": ""]）;//substring（） 方法用于提取字符串中介于两个指定下标之间的字符$text.html（str.substring（0, index） + （index & 1 ? "_": ""））;if（index >= str.length）{clearInterval（timer）;}},100）;};$（"#autotype"）.autotype（）;</script></body></html>

拓展
再简单介绍下jQuery的$.extend：

$.extend

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。
如下：在jQuery命名空间上增加两个函数。

<html><head><meta charset="utf-8"></head><body><script src="http://file2.ci123.com/ast/js/jquery_172.js"></script><script>jQuery.extend（{min:function（a, b）{return a < b ? a : b;},max:function（a, b）{return a < b ? a : b}}）;alert（"min" + "——" + jQuery.min（1, 2））;alert（"max" + "——" + jQuery.max（6, 8））;</script></body></html>

总结
大家可以自己操作看下效果，这样更容易理解学习，以上就是这篇文章的全部内容，希望对大家的学习和工作能有所帮助，如果有疑问可以留言交流。