jQ模拟打字效果插件typetype

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

typetype是一个jquery插件,可以模拟人类的打字效果。

效果图如下所示：

查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type.html

使用

$('textarea').typetype('Some text that you want to demo')

被插入的标签可以是 input 、textarea 或其他HTML 标签

自定义使用插件

$('textarea').typetype( 'Text to append', // 模拟文本 { e: 0.04, // 错误率 ( e=0 表示没有错误) t: 100, // 打字间隔时间（毫秒） keypress: function (){ // 每打一个字之后调用该方法（包括出错回退的时候）。 }, callback: function (){ // 完成后调用 } } )

插件的删除效果

前提是 textarea 中包含了文本。。。

$('textarea').backspace( 14, // 要删除的字数 { t: 100, // 删除间隔时间（毫秒） keypress: function (){ }, callback: function (){ } } )

结合jquery 动画一起使用

$('textarea') .typetype('Hello, world!') .delay(1000) .typetype('\n\nGoodbye.') .backspace(25) .fadeOut()

查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type.html

实例代码

<!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>