码迷,mamicode.com
首页 > Web开发 > 详细

jQuery模仿人类打字效果插件typetype

时间:2015-03-05 14:39:01      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢的朋友研究下吧,下面来看下它的使用方法:

引入核心文件

1 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
2 <script type="text/javascript" src="jquery.typetype.js"></script> 
写入HTML,插件可以把字打到文本框和长文本框或是其它的html元素。
1 $(‘textarea‘).typetype(‘Some text that you want to demo‘)
自定义输入
 1 $(‘textarea‘).typetype(
 2 ‘Text to append‘,
 3 {
 4 e: 0.04, // 错误率.设为0刚没有出错
 5 t: 100, // 按键的间隔时间
 6 keypress: function (){
 7 // 按键后触发的方法(有可能会出错)
 8 },
 9 callback: function (){
10 // 绑定到特定的html元素
11 }
12 })
使用文本回删方法
$(‘textarea‘).backspace(
14, // 回删的字符数量
{
t: 100, // 按键的间隔时间
keypress: function (){ },
callback: function (){ }
})
结合jquery的动画
1 $(‘textarea‘)
2 .typetype(‘Hello, world!‘)
3 .delay(1000)
4 .typetype(‘\n\nGoodbye.‘)
5 .backspace(25)
6 .fadeOut() // jQuery效果
转载请注明:jQ酷 ? jQuery模仿人类打字效果插件typetype

下载地址:百度云 | 官方下载

 

jQuery模仿人类打字效果插件typetype

标签:

原文地址:http://www.cnblogs.com/webqiand/p/4315645.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!