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!'); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!