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

时间：2016-01-07 10:23:50 阅读：264 评论：0 收藏：0 [点我收藏+]

标签：

一、使用方法
<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广告主提供精准的无线营销和品牌推广服务。

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）