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/...

本文转载于:猿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. 哈工大 计算机网络 实验二 可靠数据传输协议（停等协议与GBN协议）

    计算机网络实验代码与文件可见github:计算机网络实验整理 实验名称 可靠数据传输协议(停等协议与GBN协议) 实验目的: 本次实验的主要目的. 理解可靠数据传输的基本原理:掌握停等协议的工作原理: ...

  2. vue--axios异步请求及文件目录结构分析（个人记录）

    我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...

  3. SQL从零到迅速精通【基本语句】

    1.使用T-SQL语句创建数据表authors,输入语句如下. CREATE TABLE authors { auth_id int PRIMARY KEY,--数据表主键 auth_name VAR ...

  4. php 原生分页

    <?php // 连接数据库 $link = mysqli_connect("127.0.0.1", "root", "root", ...

  5. Laravel自定义错误提示,自定义异常类提示,自定义错误返回信息,自定义错误页面

    方法一 新增CustomException.php文件 App\Exceptions\CustomException.php <?php namespace App\Exceptions; us ...

  6. PhpStrom 常用的插件

    .env files support 可以在env函数使用是提示.env文件中所有的key值的自动完成功能 Markdown support 在编写.md文件时有预览的功能 PHP composer. ...

  7. Guava中这些Map的骚操作，让我的代码量减少了50%

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. Guava是google公司开发的一款Java类库扩展工具包,内含了丰富的API,涵盖了集合.缓存.并发.I/O等多个方面.使用这些API一方面 ...

  8. CF708C题解

    挺简单的一道数据结构... 首先考虑这个"改造"的本质,很明显是把一颗子树塞到了另一个节点下面. 考虑一个节点可能成为重心的条件.条件很明显是只有一颗子树的大小大于 \(\frac ...

  9. CF772D题解

    什么阴间十进制状压 题意:给定 $ n $ 数字,求定义函数 $ G(x) $ 能够表示 满足"十进制按位与为 $ x $"的集合的平方和之和乘上 \(x\),求 \(\bigop ...

  10. 写给开发人员的实用密码学（七）—— 非对称密钥加密算法 RSA/ECC

    本文部分内容翻译自 Practical-Cryptography-for-Developers-Book,笔者补充了密码学历史以及 openssl 命令示例,并重写了 RSA/ECC 算法原理.代码示 ...