Html5添加輕量級響應式打字機特效插件教程

1、使用方法
<link rel="stylesheet" type="text/css" href="typeit.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="typeit.js"></script>

2、Html結構
<span class="type-it"></span>

3、初始化插件
<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
});

4、回調函數
在完成文字打印以後能夠設置回調函數來完成其它工做。
$('.typeit-box').typeIt({
whatToType: 'Here is a string!',
}, function() {
console.log('This is your callback function!');
});    

KeyMob是目前國內領先的移動端廣告平臺，致力於爲手機應用App開發者創造最好的手機廣告收益，爲數以萬計的APP廣告主提供精準的無線營銷和品牌推廣服務。