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. 安卓Java主页面的编写

    1 package com.example.first; 2 3 import androidx.appcompat.app.AppCompatActivity; 4 5 import android ...

  2. LeetCode-024-两两交换链表中的节点

    两两交换链表中的节点 题目描述:给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例说明请见LeetCode官网. 来源:力 ...

  3. 如何使用 VS Code 远程连接矩池云主机

    Visual Studio Code(以下简称 VS Code)是一个由微软开发的代码编辑器.VS Code 支持代码补全.代码片段.代码重构.Git 版本控制等功能. VS Code 现已支持连接远 ...

  4. springboot----一、SpringBoot简介

    一.SpringBoot简介 1.1.回顾什么是Spring Spring是一个开源框架,2003 年兴起的一个轻量级的Java 开发框架,作者:Rod Johnson . Spring是为了解决企业 ...

  5. Kubernetes系列(五) Ingress

    作者: LemonNan 原文地址: https://juejin.im/post/6878269825639317517 Kubernetes 系列 Kubernetes系列(一) Pod Kube ...

  6. ES学习总结

    1.创建索引 put localhost:9200/person 2.添加数据 put  localhost:9200/person/_doc/1 { "first_name" : ...

  7. 七天接手react项目 系列

    七天接手react项目 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7天 r ...

  8. 淘宝 NPM 镜像站切换新域名啦

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 源起 淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前 ...

  9. 6月25日 Django 分页 cookie、session

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  10. mycat的基本介绍 看这一篇就够了

    1.前置知识 1.分布式系统 ​ 分布式系统是指其组件分布在网络上,组件之间通过传递消息进行通信和动作协调的系统.它的核心理念是让多台服务器协同工作,完成单台服务器无法处理的任务,尤其是高并发或者大数 ...