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. QT：Qt Creator使用CTRL+C后变成了光标覆盖，插入模式

    菜单栏→工具→选项→FakeVim→取消勾选"使用FakeVim"

  2. MySql绿色版的安装

    MySql绿色版的安装 1.下载 2.配置环境变量,执行命令 mysqld --initialize-insecure --user=mysql 会创建出data文件夹 3.创建my.ini文件 [c ...

  3. python中max使用key参数

    arr = [1,2,2,2,2,3,3,3] arr = collections.Counter(arr) b = max(arr.keys(),key = arr.get) 这个时候b为arr中元 ...

  4. c# 通过HttpListener创建HTTP服务

    在c#中可以利用HttpListener来自定义创建HTTP服务,通过http协议进行服务端与多个客户端之间的信息传递,并且可以做成windows系统服务,而不用寄宿在IIS上.以下为一个demo,分 ...

  5. Linux备份数据库,mysqldump命令实例详解

    mysqldump是mysql数据库中备份工具,用于将MYSQL服务器中的数据库以标准的sql语言的方式导出,并保存到文件中. 语法: mysqldump (选项) 选项: --add-drop-ta ...

  6. BSOJ6388题解

    看上去就很神秘...考虑建出图论模型. 我们将一张牌的两面 \(a,b\) 连一条边. 考虑一个连通块的意义是什么. 边是一张牌,容易发现,如果连通块是一棵树,那么选择一个根节点相当于可以打出除了根节 ...

  7. [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑

    [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 目录 [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 1. 总述 2. 接口 2.1 ...

  8. 痞子衡嵌入式：MCUBootUtility v3.5发布，支持串行NOR的ECC及双程序启动

    -- 痞子衡维护的 NXP-MCUBootUtility 工具距离上一个大版本(v3.4.0)发布过去半年了,这一次痞子衡为大家带来了版本升级 v3.5.0,这个版本主要有几个非常重要的更新需要跟大家 ...

  9. Spring系列26：Spring AOP 通知与顺序详解

    本文内容 如何声明通知 如何传递参数到通知方法中 多种通知多个切面的通知顺序 多个切面通知的顺序源码分析与图解 声明通知 Spring中有5种通知,通过对应的注解来声明: @BeforeBefore ...

  10. CentOS7.5环境下Docker环境搭建

    1. 安装wget工具: yum install wget -y 2. 使用wget工具从docker官网下载yum源: wget -P /etc/yum.repos.d/ https://downl ...