typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢的朋友研究下吧,下面来看下它的使用方法:

引入核心文件

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.typetype.js"></script>
写入HTML,插件可以把字打到文本框和长文本框或是其它的html元素。
 $('textarea').typetype('Some text that you want to demo')
自定义输入
 $('textarea').typetype(
'Text to append',
{
e: 0.04, // 错误率.设为0刚没有出错
t: 100, // 按键的间隔时间
keypress: function (){
// 按键后触发的方法(有可能会出错)
},
callback: function (){
// 绑定到特定的html元素
}
})
使用文本回删方法
$('textarea').backspace(
14, // 回删的字符数量
{
t: 100, // 按键的间隔时间
keypress: function (){ },
callback: function (){ }
})
结合jquery的动画
 $('textarea')
.typetype('Hello, world!')
.delay(1000)
.typetype('\n\nGoodbye.')
.backspace(25)
.fadeOut() // jQuery效果
转载请注明:jQ酷 ? jQuery模仿人类打字效果插件typetype
 下载地址:百度云 | 官方下载

jQuery模仿人类打字效果插件typetype的更多相关文章

  1. jQ模拟打字效果插件typetype

    typetype是一个jquery插件,可以模拟人类的打字效果. 效果图如下所示: 查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type. ...

  2. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  3. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  4. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  5. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  6. jquery模仿css3延迟效果

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

  7. Jquery焦点图/幻灯片效果 插件 KinSlideshow

    JavaScript $(function(){         $("#KinSlideshow").KinSlideshow({                 moveSty ...

  8. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

随机推荐

  1. MySQL学习笔记 -- 数据表的基本操作

    数据库是一个可以存放数据库对象的容器,数据库对象包括:表.视图.存储过程.函数.触发器.事件.其中,表是数据库最基本的元素,是其他数据库对象的前提条件. 表中的一列称为一个字段,一行称为一条记录. 1 ...

  2. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  3. js 理解new的运行机制

    先上段代码: function People(name) { this.name = name; } People.prototype.sayName = function () { console. ...

  4. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  5. 认识DOM和一些方法

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  6. iOS 封装添加按钮的方法

    添加按钮 #pragma mark 添加按钮 - (void)addButtonWithImage:(NSString *)image highImage:(NSString *)highImage ...

  7. JavaScript异步编程(2)- 先驱者:jsDeferred

    JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...

  8. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q102-Q104)

    Question  102   You are designing a Windows application that accesses information stored on a ShareP ...

  9. iOS之UIScrollView循环滚动

    #import "ViewController.h" #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width #d ...

  10. android滚动公告栏

    项目里要用到开奖公告,单行显示向上滚动的TextView,网上随便找了一个控件发现效果还不错改装一下就可以用到项目里.唯一不妥的地方就是字体大小不太好控制,不是正常的字体大小,也没有深究代码,先把工作 ...