typed.js——动态打印字体插件

zkskyers

已于 2023-03-09 21:04:08 修改

阅读量1.3k

点赞数 1

分类专栏：前端开发文章标签： js

于 2020-06-29 23:51:27 首次发布

本文链接：https://blog.csdn.net/soul_sky/article/details/107031224

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

时间：2020-5-15

前言（背景）：
最近使用到了一个有趣而简单的动态打印字体插件——typed.js。这里记录一下。

代码

1、在官网下载相应文件并引入HTML

<script src="./typed-js/typed.min.js"></script>

准备标签如下：

<div class="typedjs"></div>

2、js代码实现

/**
 * 通过typed-js插件打印文字
 */
function printWord() {
    var typed = new Typed('.typedjs', {
        strings: [
            'Hello World!',
            'I\'m Zksky!',
            '译：我思故我在',
        ],
        //打印的速度。单位ms
        typeSpeed: 150,
        //设置循环，为真，开启循环
        loop: true,
        //打印前的延迟时间
        startDelay: 0,
        //打印后的延迟时间
        backDelay: 2000,
        //返回的速度
        backSpeed: 30
    });
}