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. Python：PIL（三）——Image

    学习自:PIL官方文档--Image (2条消息) Python图像处理PIL各模块详细介绍_章子雎的博客-CSDN博客 一.Image模块 1.open 用法 open(fp,mode='r',fo ...

  2. Python：GUI库tkinter（二）

    学习自: Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) - 洪卫 - 博客园 Tkinter简明教程 - 知乎 TkDocs_官方文档 一个Tkinter库较为全面的总结,很 ...

  3. Chaoter07 面向对象 （Object）

    目录 Chapter07 面向对象 7.1 类与对象 7.1.1 对象在内存中的存在形式 (重要) 7.1.2 属性 / 成员变量 7.1.3 类与对象的内存分配机制(重要) Object03 Obj ...

  4. Hystrix&Dashboard配置使用

    目录 Hystrix是什么 熔断 什么是熔断 熔断类型 打开 半开 关闭 使用方法 导包 添加启动注解 新增方法 测试 降级 什么是降级 使用方法 导包 修改yml,新增如下 启动类新增注解 @Ena ...

  5. Laravel-手机短信验证码-阿里云

    1.composer require alibabacloud/client2.App\Service\AliyunSms.php <?php namespace App\Service; us ...

  6. 如何实现 UITabbarController 的 State Preservation?

    原文链接 最近在看ios programming - the big nerd ranch guide 这本书,其中第24章介绍了如何使用系统接口来实现 State Restoration. 示例部分 ...

  7. VBS文件无限循环解决办法

    VBS文件无限循环解决办法,也就相当于编程中的停止运行指令. 那么如何关掉VBS文件呢?当然关机后会自动关掉,还有另外一种方法就是,在"任务管理器"中找到进程"WScri ...

  8. ElasticSearch7.3 学习之定制分词器（Analyzer）

    1.默认的分词器 关于分词器,前面的博客已经有介绍了,链接:ElasticSearch7.3 学习之倒排索引揭秘及初识分词器(Analyzer).这里就只介绍默认的分词器standard analyz ...

  9. Anaconda 安装 国内镜像问题解决方案

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 遇到问题:安装2021版本后无法打开Anaconda Navigator 解决方案:使用管理员身份打开Avaconda Prompt,输入conda ...

  10. 如何在 Java 中实现二叉搜索树

    二叉搜索树 二叉搜索树结合了无序链表插入便捷和有序数组二分查找快速的特点,较为高效地实现了有序符号表.下图显示了二叉搜索树的结构特点(图片来自<算法第四版>): 可以看到每个父节点下都可以 ...