Skip to content →

一个基于Jquery的打字效果插件TypingCat

前段时间,要写一个页面,需要用到打字效果。在网上找到几个基于jQery的插件,但是有些太复杂,有些不太可控。于是干脆就自己写了一个。
用法和效果都比较简单,直接把html的代码写出来,看注释应该就知道怎么用了
首先需要在 <head></head> 中加载必要的插件

<head>
…
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/TypingCat.js”></script>
</head>

而html的body中有如下标签内容(用来承载打印效果的位置):

<body>
<div><a href=’#’>back</a></div>
<div id=’pra1′>
<div id=’word1′></div>
<div id=’word2′></div>
<div id=’word3′></div>
</div>
<div id=’pra2′>
<div class=’word1′></div>
<div class=’word2′></div>
</div>
</body>

然后需要做的是,在任意位置加入下面的代码(开始使用插件,示例是放在了head标签里面):

<head>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/type.js”></script>
<script>
$(function(){
l_blink_speed = 300;    //’‘闪烁速度 speed ” blinking
l_blink = 14;           //‘’闪烁次数 times ” blink
l_blink_s = 8;          //‘’闪烁次数(少)times ” blink (fewer)
l_start = 2;            //how long to wait before a new line starts
l_start_q = 1;          //how long to wait before a new line starts (quick)
w_blink = 80;           //汉字打印时间间隔 speed of tying
hide_time = 2000;      //字体层隐藏速度 speed of hiding
wait = 1000;            //weit 3 second before start
typeWriter(“this is Pra1’s 1st words”,”#pra1″,”#word1″,l_start,l_blink_s);
typeWriter(“this is Pra1’s 2nd words”,”#pra1″,”#word2″,l_blink_s,l_blink);
typeWriter(“this is Pra1’s 3nd words”,”#pra1″,”#word3″,l_blink,l_blink_s);
typeWriter(“this is Pra1’s 4nd words”,”#pra1″,”#word3″,l_blink_s,-1);   //retype in the same div. -1 means this pragraph  will disappear after finishing typing
typeWriter(“this is Pra1’s 1st words”,”#pra2″,”.word1″,l_start,l_blink_s);
typeWriter(“this is Pra1’s 2nd words”,”#pra2″,”.word2″,l_blink_s,-2);   //-2 means this pragraph will not disappear and ” will blink without stop
})
</script>
</head>

真正产生效果的是typeWriter(str,pra_id,div_id,wait_before,cur_wait)
参数的意义分别是:
str:需要打印的文字,注意最好不要打印‘’这个符号,因为它作为光标使用了
pra_id:段落的id或者类名,从例子中可以看出,如果是传入id则用”#id”的形式,如果传入样式的类名则用“.class”的形式。文字的消失是以段落为单位的。
div_id:每一行用div层引起来,这里是段落中各个div的id或者样式类名。用法同上。
wait_before:上一行的光标闪烁次数,也就是说上一行打印结束后多久才开始打印本行。
cur_wait:本行结束是,光标的闪烁次数。
上面的一些变量有说明,可以自己修改调整各种效果的时间和速度。
效果可以看这里
下载在这里

Published in