轻量级响应式jQuery打字机特效插件

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
});
              

配置参数

该打字机特效有以下一些可用的配置参数。

回调函数

在完成文字打印之后可以设置回调函数来完成其它工作。

$('.typeit-box').typeIt({
  whatToType: 'Here is a string!',
}, function() {
  console.log('This is your callback function!');
});