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开发者

版权声明:

jQ模拟打字效果插件typetype

更多相关内容请移步web开发者 typetype是一个jquery插件,可以模拟人类的打字效果。 效果图如下所示:查看演示 http://weber.pub/demo/160828/jQuery....
  • canglingyue
  • canglingyue
  • 2016年08月28日 23:39
  • 644

typed.js 打字机效果

官方github 官方网站:bootstrap CDN案例地方单击看效果前提 引入js库 手册官方手册new Typed() 使用new实例化 new Typed('参数一','参数二');...
  • weixin_41000111
  • weixin_41000111
  • 2017年12月05日 22:32
  • 124

用Jquery实现打字效果

用Jquery实现打字效果
  • u012079603
  • u012079603
  • 2015年02月14日 13:42
  • 2065

js+jQuery实现网页打字机效果(带光标)

在写网站的时候,有时候可能需要打字机动画去实现一些页面效果的显示,我在网上找了很久也没有很完整的,符合我要求的代码,索性就结合网上的大神们的代码段自己写了一个 HTML CSS .c...
  • sinat_33312523
  • sinat_33312523
  • 2017年05月22日 18:45
  • 799

Html5添加轻量级响应式打字机特效插件教程

KeyMob是目前国内领先的移动端广告平台,致力于为手机应用App开发者创造最好的手机广告收益,为数以万计的APP广告主提供精准的无线营销和品牌推广服务。...
  • Angel19951012
  • Angel19951012
  • 2016年01月07日 10:20
  • 233

js模拟网上打字测试

"http://www.w3.org/TR/html4/loose.dtd">无标题文档 var SourceString="网上打字测试,点开始之后可以开始打字,按下第一个键之后开始计时,打字结束之...
  • showlin
  • showlin
  • 2006年05月19日 15:25
  • 4528

jquery实现打字机效果

打字机,算是一种比较好玩的一种文字输出效果,其原理是时段性向页面输入内容,以达到效果…… 我这里是在html中预先有一个隐藏的div,里面有将要输出的内容。js的主要功能是,获取隐藏的内容元素,对内...
  • u014703834
  • u014703834
  • 2014年12月17日 13:46
  • 1006

JS实现简单的打字效果

无标题文档 function $(id){ return document.getElementById(id); } var str="hello,welcome to study ...
  • qfxsxhfy
  • qfxsxhfy
  • 2014年10月22日 12:48
  • 1117

typer.js,可能是最小但功能也不多的模拟打字效果插件

typer.js介绍typer.js是模拟打字机效果的轻型js插件(1.5 Kb),有打字、删除、重复和停顿几种简单的效果。DEMO起因由于这几天写个在线简历,我想使用打字的特效,在github上搜到...
  • twoByte
  • twoByte
  • 2016年09月26日 11:12
  • 854

Xcode 装逼插件:打字的震屏和火花效果

转自:http://www.cocoachina.com/ios/20151217/14668.html Xcode 装逼插件:打字的震屏和火花效果 2015-12-17 06:18 编辑...
  • zhangqipu000
  • zhangqipu000
  • 2016年01月04日 10:13
  • 1149
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQ模拟打字效果插件typetype
举报原因:
原因补充:

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