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

最新推荐文章于 2024-09-13 07:08:58 发布

转载最新推荐文章于 2024-09-13 07:08:58 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2505907/blog/598695

文章标签：

#python

本文概述了AI音视频处理领域的关键技术，包括视频分割、语义识别、自动驾驶、AR、SLAM等，并探讨了其在实际应用中的作用。

2019独角兽企业重金招聘Python工程师标准>>>

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