jQ模拟打字效果插件typetype

来源：互联网发布：mac如何下载优酷视频编辑：程序博客网时间：2024/06/05 05:47

查看演示 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>

实例代码及插件下载地址如下：

链接：http://pan.baidu.com/s/1hr8ILy0 密码：upy0

官方github地址：https://github.com/iamdanfox/typetype

jQ模拟打字效果插件typetype

更多相关内容请移步web开发者

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

使用

自定义使用插件

插件的删除效果

结合jquery 动画一起使用

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

实例代码

实例代码及插件下载地址如下：

更多相关内容请移步web开发者