文本/链接
轻量级响应式jQuery打字机特效插件
PetitQ
typeit 是一款轻量级响应式 jQuery 打字机特效插件。该打印机特效可以设置打字速度，是否显示光标，是否换行和延迟时间等属性，它可以打印单行文本和多行文本，并具有可缩放、响应式等特点。
使用方法:
使用该打字机特效需要引入 jQuery、typeit.js 和 typeit.css 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" type="text/css" href="typeit.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="typeit.js"></script>
HTML 结构:
该 jQuery 打字机特效的 HTML 结构如下：
<span class="type-it"></span>
初始化插件:
你可以通过 2 种方式来初始化该打字机插件，第一种方式是通过在 HTML 标签上通过 data-*属性来设置参数，然后通过 typeIt()方法来初始化。
<span class="type-it"
data-typeit-whattotype="A new string to type."
data-typeit-speed="100"
data-typeit-lifelike="true"
data-typeit-showcursor="true">
</span>
$('.type-it').typeIt();
第二种方式是在初始化插件的时候传入配置参数。
$('.type-it').typeIt({
whatToType:'Enter your string here!',
typeSpeed: 300,
lifeLike: false,
showCursor: true
});
该打字机插件支持输入多个句子的文本。默认情况下每一个句子占一行，自上往下显示。要使用多行句子，只需要传入一个数组即可。
$('.type-it').typeIt({
whatToType:['Enter your string here!', 'Another string!']
});
你也可以设置新的居中覆盖旧的句子的打字效果，只需要将 breakLines 参数设置为 false 即可。
$('.type-it').typeIt({
whatToType: ['Enter your string here!', 'Another string!'],
breakLines: false
});
配置参数：
该打字机特效有以下一些可用的配置参数。
| 参数 | 默认值 | 描述 |
| whatToType | '默认文本' | 默认打印的文本 |
| typeSpeed | 200 | 打印的速度 |
| lifeLike | true | 设置不规则的打字速度，模拟真人打字效果 |
| showCursor | true | 显示闪烁的光标效果 |
| breakLines | true | 多行文本时的打印效果，设置为true时为句子从上往下打印，设置为false时为新句子覆盖旧句子 |
| breakWait | 500 | 打印多个句子时，句子之间的间隔时间 |
| delayStart | 250 | 插件初始化之后到开始打印之间的时间 |
回调函数：
在完成文字打印之后可以设置回调函数来完成其它工作。
$('.typeit-box').typeIt({
whatToType: 'Here is a string!',
}, function() {
console.log('This is your callback function!');
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
