做网站|网站建设,就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载!

JS以打印机方式显示文字插件typed.js
来源:易助科技网浏览量:10收藏

简介

typed.js是一个类型化库,效果是用打字机的方式显示一段话,可以自定义任何字符串、指定显示速度、指定是否循环等。


使用

1.  引入 typed.js 文件


2.  HTML

<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>


3.  调用

<script type="text/javascript">
var options = {
strings: [
'First test.',
'Second test, \nit will pause for three seconds. ^3000',
"Second test, \nthe last sentence will go back to 'Second test, ', \noh no, this is the third test. ^1000",
"It's going to start repeating."
],
typeSpeed: 50, //打印速度
startDelay: 300, //开始之前的延迟300毫秒
loop: true, //是否循环
};
var typed = new Typed('#typed', options);
</script>


相关链接

官网地址 :https://mattboldt.com/demos/typed-js/

Github 地址 :https://github.com/mattboldt/typed.js/