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