- ·上一篇文章:CSS揭秘pdf高清英文原版下载
- ·下一篇文章:原生js和jquery处理cookie的插件介绍
当前位置:K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
jQ模拟打字效果插件typetype
-->
typetype是一个jquery插件,可以模拟人类的打字效果。
效果图如下所示:
查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type.html
使用
1 $('textarea').typetype('Some text that you want to demo')
被插入的标签可以是 input 、textarea 或其他HTML 标签
自定义使用插件
1
2
3
4
5
6
7
8
9
10
11
12
13 $('textarea').typetype(
'Text to append', // 模拟文本
{
e: 0.04, // 错误率 ( e=0 表示没有错误)
t: 100, // 打字间隔时间 (毫秒)
keypress: function (){
// 每打一个字之后调用该方法(包括出错回退的时候)。
},
callback: function (){
// 完成后调用
}
}
)
插件的删除效果
前提是 textarea 中包含了文本。。。
1
2
3
4
5
6
7
8 $('textarea').backspace(
14, // 要删除的字数
{
t: 100, // 删除间隔时间 (毫秒)
keypress: function (){ },
callback: function (){ }
}
)
结合jquery 动画一起使用
1
2
3
4
5
6 $('textarea')
.typetype('Hello, world!')
.delay(1000)
.typetype('\n\nGoodbye.')
.backspace(25)
.fadeOut()
查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type.html
实例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery.Type</title>
<script src="jquery.js"></script>
<script src="jquery.typetype.js"></script>
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="10"></textarea>
<br>
<textarea name="" id="txt2" cols="30" rows="10"></textarea>
<br>
<textarea name="" id="txt3" cols="30" rows="10">
这是测试文本,这是测试文本,这是测试文本,这是测试文本
</textarea>
<br>
<textarea name="" id="txt4" cols="30" rows="10"></textarea>
<script>
$('#txt1').typetype('Some text that you want to demo');
$('#txt2').typetype(
'这是一段测试文字',
{
e: 0.04, // error rate. (use e=0 for perfect typing)
t: 100, // interval between keypresses
keypress: function (){
//alert("1")// called after every keypress (this may be an erroneous keypress!)
},
callback: function (){
alert('1')// the `this` keyword is bound to the particular element.
}
}
);
$('#txt3').backspace(
14, // number of chars to backspace
{
t: 100, // interval between keypresses
keypress: function (){ },
callback: function (){ }
}
);
$('#txt4')
.typetype('Hello, world!')
.delay(1000)
.typetype('\n\nGoodbye.')
.backspace(25)
.fadeOut()
</script>
</body>
</html>
实例代码及插件下载地址如下:
链接:http://pan.baidu.com/s/1hr8ILy0 密码:upy0
官方github地址:https://github.com/iamdanfox/typetype
jQ模拟打字效果插件typetype