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. Pycharm：运行程序时，不额外打开一个Console

    每次运行程序,比如A.py,都会额外生成一个Console,排列成一排的 A(2),A(3),... 那么如何关闭呢? 答案是:在Settings->Console中,勾选  'Use exis ...

  2. C#集合，字典的运用

    三个题解释所有 using System;using System.Collections.Generic;using System.Linq;using System.Text;using Syst ...

  3. linux作业--第四周

    1.自建yum仓库,分别为网络源和本地源 所有Yum仓库的配置文件均需以 .repo 结尾并存放在/etc/yum.repos.d/目录中的 [base] : yum仓库唯一标识符,避免与其它仓库冲突 ...

  4. GoLang设计模式21 - 装饰模式

    装饰器模式是一种结构型设计模式.通过装饰器模式可以为一个对象添加额外的功能而不需对其作出调整. 还是通过具体的案例来了解装饰器模式:假设我们开了一家披萨店,现在店里主营两款披萨: 素食狂披萨(Vegg ...

  5. laravel7 数据库数据导出至 xlsx

    网址参考: https://learnku.com/articles/32391 1:安装excel插件 安装方式 composer require maatwebsite/excel 2:excel ...

  6. pthon语法

    1.条件语句 #找到a.b.c中最大的数,其中and是逻辑运算符"且"的意思 if a>b and a>c: print(a) elif b>a and b> ...

  7. LGP5437题解

    呃怎么感觉很裸啊( 题意是让求生成树边权之和的期望,那么我们只需要算出所有生成树的边权之和除以生成树边数即可. 由于是求和,我们只需要计算出每条边对答案的贡献即可. 我们知道一个完全图有 \(n^{n ...

  8. [动态规划] LeetCode 2055. 蜡烛之间的盘子

    LeetCode 2055 蜡烛之间的盘子 前言: 这个题做的时间略长了,开始的时候打算先定位两个端点的蜡烛,之后在遍历其中的盘子,结果不言而喻,必time limit了,之后就预处理了前x的蜡烛间盘 ...

  9. VuePress 博客优化之开启 Algolia 全文搜索

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 由于 V ...

  10. 官宣 .NET 7 Preview 2

    今天,我们很高兴发布 .NET 7 预览版 2..NET 7 的第二个预览版包括对 RegEx 源生成器的增强.将 NativeAOT 从实验状态转移到运行时的进展,以及对"dotnet n ...