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. linux多进/线程编程（4）——进程间通信之pipe和fifo

    前言: Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问,要交换数据必须通过内核,在内核中开辟一块 ...

  2. deepin 字符集安装

    deepin字符集安装 编辑 目录介绍 /usr/share/i18n/charmaps 这个目录下存放了该Linux操作系统可用字符集的安装包,如果你的操作系统上没有安装某个字符集可以到这个目录下寻 ...

  3. jQuery-ajax-天气接口

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. tensorflow源码解析之common_runtime-direct_session

    目录 核心概念 direct_session direct_session.h direct_session.cc 1. 核心概念 读过之前文章的读者应该还记得,session是一个执行代理.我们把计 ...

  5. .NET CORE 授权

    .NET CORE 授权 一.三种方式授权 不论使用NET CORE框架的何种授权都必须引入中间件,因为它实现了在管道中对当前请求的鉴权和授权的验证,在Startup中的Configure中首先加入鉴 ...

  6. pandas常用操作详解——pandas的去重操作df.duplicated()与df.drop_duplicates()

    df.duplicated() 参数详解: subset:检测重复的数据范围.默认为数据集的所有列,可指定特定数据列: keep: 标记哪个重复数据,默认为'first'.1.'first':标记重复 ...

  7. Mybatis工具类(自动提交事务)

    public class MybatisUtils { private static SqlSessionFactory sqlSessionFactory; static { try { //获取工 ...

  8. Golang 语言特性

    1. 函数 与c 语言不同,go 语言中,函数的参数和返回值都由栈来存储. 传值:函数调用时会复制参数,被调用方和调用方持有两份不相关的两份数据 传引用:函数调用时会传递参数指针,被调用方和调用方持有 ...

  9. JavaWeb——Http

    4.1.什么是http http(超文本传输协议)是一个简单的请求-响应协议,它通常运行在TCP之上. 文本:无链接 超文本:利用超链接将普通文本的信息组织在一起的超级文本 4.2.http两个时代的 ...

  10. ZYNQ SGI、PPI、SPI三种中断的实例（含代码）

    ZYNQ中断分为3类: SGI(Software Generated Interrupts)软件中断 PPI(Private Peripheral Interrupts)私有外设中断 SPI(Shar ...