jQuery模仿人类打字效果插件typetype

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的更多相关文章
- jQ模拟打字效果插件typetype
typetype是一个jquery插件,可以模拟人类的打字效果. 效果图如下所示: 查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type. ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
- jQuery仿3D旋转木马效果插件(带索引按钮)
项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...
- jquery模仿css3延迟效果
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- Jquery焦点图/幻灯片效果 插件 KinSlideshow
JavaScript $(function(){ $("#KinSlideshow").KinSlideshow({ moveSty ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
随机推荐
- C# Async/Await
前言 前几天去一个公司面试,被问到 Async/Await,之前只知道有这么个东西,没有深入了解过就没有答上来.今天没啥事情,就查了下资料. 同步编程,异步编程概念 通常情况下,我们写的程 ...
- apache反向代理
正向代理是客户端发送请求给代理服务器,代理服务器将请求发给实际处理的服务器 反向代理是客户端发送请求给服务器(实际上是个代理服务器),服务器将请求发给实际处理的服务器 情景 在一台服务器上开了apac ...
- Hadoop中MR程序的几种提交运行模式
本地模型运行 1:在windows的eclipse里面直接运行main方法,就会将job提交给本地执行器localjobrunner执行 ----输入输出数据可以放在本地路径下(c:/wc ...
- 构造自己的动画函数:animation,stop功能的实现
最近做一个广告项目,里面涉及很多动画效果,由于不能使用jquery,所以只能构建自己的动画方法. 数据结构: elem是DOM对象,给它设置一个属性对象,用来记录elem的动画对象,比如'left', ...
- IE6/IE7中li底部4px空隙的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...
- GitHub学习心得之 分支操作
目录 前言 1. 一般的push和pull 2. 分支操作 前言 本文对Github的分支操作进行了总结, 主要基于以下文章: http://blog.csdn.net/guang11cheng/ar ...
- Windows TCP连接数限制解决
reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters" /v "M ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q141-Q143)
Question 141 You are planning an upgrade to a SharePoint 2010 application. You have the following r ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q121-Q123)
Question 121 You are designing a SharePoint 2010 workflow that will be used to monitor invoices. Th ...
- UIBezierPath-绘制基本图形
步骤1:确定路径 步骤2:渲染 override func draw(_ rect: CGRect) { let path:UIBezierPath // 矩形 // path = UIBezierP ...