Html5添加轻量级响应式打字机特效插件教程

一、使用方法

<link rel="stylesheet" type="text/css" href="typeit.css">

<script src="jquery-2.1.4.min.js"></script>

<script src="typeit.js"></script>

二、Html结构

<span class="type-it"></span>

三、初始化插件

<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!');

});    

KeyMob是目前国内领先的移动端广告平台，致力于为手机应用App开发者创造最好的手机广告收益，为数以万计的APP广告主提供精准的无线营销和品牌推广服务。