jQ模拟打字效果插件typetype

原创 2016年08月28日 23:39:09

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

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>

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

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

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

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

版权声明:

jQuery模拟人打字插件typetype

  • 2014年07月10日 17:12
  • 148KB
  • 下载

jq弹窗各种效果插件

  • 2017年03月15日 16:04
  • 7KB
  • 下载

使用jq和flip插件来做了一个幻灯片翻转效果小demo

我们的实验室官网终于要做了,但由于后台的部长跟前端的小妹妹写代码太慢了,我不得不插手帮他们写点小demo,所以今日无聊就找了一个不错的插件来写了,本来是找到turn.js的,因为体积比较少,而且每啥依...

模拟电子签章盖章效果的jQuery插件jquery.zsign

2013-01-28更新:打包最新版本源码到csdn下载频道了,包括demo。下载地址: 上传中,稍候发布。。 CSDN审核还没通过,郁闷,直接贴代码吧: /* desc:jQuery...

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

模拟电子签章盖章效果的jQuery插件源码

转自http://www.jquerycn.cn/a_5675 客户提了个需求,需要在已审核的文档上加盖公章,网上找了找没有现成的,自己动手丰衣足食 老规矩,上图看效果: ...

jquert模拟tabs效果插件

//当窗体加载完毕的时候 出发该匿名函数 //$(document) 把dom对象转换成jquery对象 // $(function(){ $("#tabs").tabs({...

jQuery插件实现模拟dialogs效果实例(图片)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 模拟dia...

JQ图片列表查看插件

  • 2015年12月21日 18:37
  • 508KB
  • 下载

xjplugin 多种jq插件集合

  • 2015年04月26日 18:39
  • 377KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQ模拟打字效果插件typetype
举报原因:
原因补充:

(最多只允许输入30个字)