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. $('textarea').typetype(
  2.   'Text to append', // 模拟文本
  3.   {
  4.     e: 0.04, // 错误率 ( e=0 表示没有错误)
  5.     t: 100, // 打字间隔时间 （毫秒）
  6.     keypress: function (){
  7.       // 每打一个字之后调用该方法（包括出错回退的时候）。
  8.     },
  9.     callback: function (){
  10.       // 完成后调用
  11.     }
  12.   }
  13. )

插件的删除效果

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

  1. $('textarea').backspace(
  2.   14, // 要删除的字数
  3.   {
  4.     t: 100, // 删除间隔时间 （毫秒）
  5.     keypress: function (){ },
  6.     callback: function (){ }
  7.   }
  8. )

结合jquery 动画一起使用

  1. $('textarea')
  2.   .typetype('Hello, world!')
  3.   .delay(1000)
  4.   .typetype('\n\nGoodbye.')
  5.   .backspace(25)
  6.   .fadeOut()

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

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery.Type</title>
  6.     <script src="jquery.js"></script>
  7.     <script src="jquery.typetype.js"></script>
  8. </head>
  9. <body>
  10. <textarea name="" id="txt1" cols="30" rows="10"></textarea>
  11. <br>
  12. <textarea name="" id="txt2" cols="30" rows="10"></textarea>
  13. <br>
  14. <textarea name="" id="txt3" cols="30" rows="10">
  15.     这是测试文本，这是测试文本，这是测试文本，这是测试文本
  16. </textarea>
  17. <br>
  18. <textarea name="" id="txt4" cols="30" rows="10"></textarea>
  19. <script>
  20.     $('#txt1').typetype('Some text that you want to demo');
  21.     $('#txt2').typetype(
  22.             '这是一段测试文字',
  23.             {
  24.                 e: 0.04, // error rate. (use e=0 for perfect typing)
  25.                 t: 100, // interval between keypresses
  26.                 keypress: function (){
  27.                     //alert("1")// called after every keypress (this may be an erroneous keypress!)
  28.                 },
  29.                 callback: function (){
  30.                     alert('1')// the `this` keyword is bound to the particular element.
  31.                 }
  32.             }
  33.     );
  34.     $('#txt3').backspace(
  35.             14, // number of chars to backspace
  36.             {
  37.                 t: 100, // interval between keypresses
  38.                 keypress: function (){ },
  39.                 callback: function (){ }
  40.             }
  41.     );
  42.     $('#txt4')
  43.             .typetype('Hello, world!')
  44.             .delay(1000)
  45.             .typetype('\n\nGoodbye.')
  46.             .backspace(25)
  47.             .fadeOut()
  48. </script>
  49. </body>
  50. </html>

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

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

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

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hhc112i1b1j

jQ模拟打字效果插件typetype的更多相关文章

  1. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  2. jq无缝滚动效果插件（之前的那个升级改造加强版）

    scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置 ...

  3. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  4. javascript实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...

  5. jQuery模拟打字逐字输出代码

    效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...

  6. 在 WindowMobile 上的模拟LED 显示屏插件（转）

    源:在 WindowMobile 上的模拟LED 显示屏插件 我在给一个对话框上的控件查找翻看合适的图标时,无形中看到了一个LED显示屏的图标,这里所说的LED显示屏是指由很多LED灯密集排列组成的点 ...

  7. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  8. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  9. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

随机推荐

  1. JZ-011-二进制中 1 的个数

    二进制中 1 的个数 题目描述 输入一个整数,输出该数32位二进制表示中1的个数.其中负数用补码表示. 题目链接: 二进制中 1 的个数 代码 /** * 标题:二进制中 1 的个数 * 题目描述 * ...

  2. Spring系列20：注解详解和Spring注解增强(基础内功)

    有部分小伙伴反馈说前面基于注解的Spring中大量使用注解,由于对Java的注解不熟悉,有点难受.建议总结一篇的Java注解的基础知识,那么,它来了! 本文内容 什么是注解? 如何定义注解 如何使用注 ...

  3. linux curl 的用法指南

    curl用法指南

  4. jQuery Validatede 结合Ajax 表单验证提交

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JDK 线程池

    JDK 线程池 线程池参数 在JDK的4种线程池之前, 先介绍一下线程池的几个参数 corePoolSize 线程池的核心线程数量, maximumPoolSize 线程池的最大线程数量 keepAl ...

  6. ArcMap操作随记（2）

    1.空间校正 变换-仿射 仅发生偏移 橡皮页变化 形状改变 变换-投影 旋转,改变角度 变换-相似 改变大小.形状不变 2.计算行列号 Int(([POINT_Y]-1273.143242)/30)+ ...

  7. Django 之 modelForm （edit.html页面的编写）

    models.py文件 from django.db import models # Create your models here. from django.db import models # C ...

  8. 6月25日 Django 分页 cookie、session

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  9. ctf之GET

    题目信息如图 启动环境 根据信息只需将参数?what=flag添加到url上即可

  10. idea导入gitee下载的项目文件

    前一段时间在学习javaWeb时想要把gitee中的下载的项目在本地环境中跑一遍,然后根据效果再自己做出来. 但是当导入到IDEA中,配置完tomcat后一直报404错误.404是学习javaweb阶 ...