JQuery插件开发 -- 实现打字效果

作为博客的第一篇技术文，就以这种简单好玩的插件开始

该插件是原创的小插件，虽然代码挺简单的，但也很好玩

-------------------------------------------------------------------------

打字效果一开始是在hackerzhou的爱情纪念页上看见的（往事随风）

当时感觉很炫酷，就自己写了一个

不过当时采用的方法较笨，效果预览链接： 微公主

具体我就不说了，各位看官可以看源码，实在想知道咱们可以一起讨论

-------------------------------------------------------------------------

好吧，进入正题，插件的使用如下：

在自己页面引入 jquery.typing.js ，代码如下：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.typing.js"></script>

html代码如下(  以下 class/id 名字可自定义 )：

<span class="typing_preview"></span>
<div class="typing"></div> 

添加CSS代码如下：

.typing_list{
		position: relative;
}
.typing_underline{
		position: absolute;
		top: 0px;
		left: 0px;
}
.typing_preview{
		position: absolute;
		top: -99999px;
}

现在就可以直接引用了，代码如下：

$(function(){
		$(".typing").starTyping({
				// 必选
				typing_chapter : ["亲爱的微公主：","我不知道你是谁，也不知道你在哪里，不过我知道，不管你在|text-indent:28px;","哪里，我一定会把你找到，…………","by 捕捉流星的孩子|width:120px;margin:30px 0px 0px 260px;"],
				
				/* 可选 */
				start : 0,

				typing_preview :".typing_preview"
		});
});

参数的解析如下：

typing_chapter：自定义文章，数组形式保存，每个值代表一行，而且可添加自定义样式，形式为 |style1=value1;style=value2

start：从第start行开始，默认0

typing_preview： 预处理的class/id，可自定义

demo预览及下载

个人博客地址：www.chenyuheng.com   原文地址：http://www.chenyuheng.com/?post=30