jquery实现打字机效果

打字机，算是一种比较好玩的一种文字输出效果，其原理是时段性向页面输入内容，以达到效果……

我这里是在html中预先有一个隐藏的div，里面有将要输出的内容。js的主要功能是，获取隐藏的内容元素，对内容进行预处理，把每一个字符分别和标签传入数组中。(如果有标签，那么这一个标签将占用数组的一个元素)。然后再便利数组进行输出就能达到效果。

文章的最后，有免费的资源供大家下载……希望共同学习，交流……

<div class="container">
<div class="con hide" id="con">
<p>123 <i class="a"> Need jio[fuhji </i>C:\Users\Administrator></p>
<p> I Miss U</p>
<p> <img src="images/a.png"> 132</p>
<p>I12 <strong class="a">Need</strong> You</p>
<p>I Need You 456</p>
</div>
<div class="con" id="show"></div>
</div>

CSS：

*{margin: 0;padding: 0;}
.container{width: 500px;height: 500px;margin: 0 auto;background: #000;padding: 15px;}
.con{width: 100%;height: 100%;color: #fff;font-weight: bold;font-family: 微软雅黑;}
.a{color: yellow;}
.hide{display: none;}

js:

$(function(){
var $con = $("#con p"),
$show = $("#show"),
Innt = [],//预定义用存储的数组
Index = 0,//预定义用存储的数组的角标
Itimes = 0,//光标闪烁次数
FootIndex = 0,//输出时用的角标
InnerHTML = "",//当前页面已经输出的元素
Auto = null,//自动打印方法
temp = '',//保存标签的变量
flag = true,//标记标签已经开始
endFlag = false;//判断标签结束
for (var i = 0; i < $con.length; i++) {
for(var j = 0; j<$con.eq(i).html().length;j++){
if($con.eq(i).html()[j] == "<" ) {
flag = false;
}
endFlag = false;
if($con.eq(i).html()[j] == ">" ) {
endFlag = true;
}
if (flag) {
Innt[Index++] = $con.eq(i).html()[j];
} else {
temp += $con.eq(i).html()[j];
if (endFlag) {
Innt[Index++] = temp;
temp = '';
flag = true;
}
}
}
Innt[Index++] = "</br>";
}
FunOut = function(){
if (Itimes % 3 != 0) {
Itimes++;
$show.html(InnerHTML + "_");
}else{
if(FootIndex<Index){
InnerHTML +=Innt[FootIndex++];
$show.html(InnerHTML)
}else{
clearInterval(Auto);
}
}
Itimes++;
};
Auto = setInterval(FunOut,100);
});

源文件下载地址：http://download.csdn.net/detail/u014703834/8269361