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 'This is the default string. Please replace this string with your own.' 默认打印的文本
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!');
});