Typed.js
Github
https://github.com/mattboldt/typed.js快速使用
<span id="element"></span>
<!--从CDN导入-->
script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<script>
var typed = new Typed('#element', {
strings: ['<i>第一句话</i>', '第二句话'],
typeSpeed: 50,
});
</script>参数说明
参数 | 类型 | 说明 |
|---|---|---|
strings | 列表 | 打字的内容 |
typeSpeed | 数字(毫秒) | 打字速度 |
startDelay | 数字(毫秒) | 开始打字前的延迟 |
backSpeed | 数字(毫秒) | 退格速度 |
backDelay | 数字(毫秒) | 开始退格前的延迟 |
smartBackspace | 布尔 | 智能退格(删除到共有的字符串就开始打字) |
shuffle | 布尔 | 是否随机选择列表中的字符串 |
loop | 布尔 | 是否循环播放 |
loopCount | 整数 | 循环数 |
fadeOut | 布尔 | 是否用淡出代替退格 |
fadeOutClass | 字符串(css类) | 使用淡出效果的css类 |
fadeOutDelay | 数字(毫秒) | 开始淡出前的延迟 |
showCursor | 布尔 | 是否显示光标 |
cursorChar | 字符串 | 光标字符 |
autoInsertCss | 布尔 | 在HTML中插入光标和淡出CSS |
attr | 字符串 | attr属性用于键入 |
bindInputFocusEvents | 布尔 | 绑定到焦点，如果el是文本输入则模糊 |
contentType | 字符串 | 使用'html'或者普通字符作为文本 |
内置方法
方法 | 说明 |
|---|---|
onBegin: (self) => {} | 开始打字之前的操作 |
onComplete: (self) => {} | 结束打字后的操作 |
preStringTyped: (arrayPos, self) => {} | 输入每个字符之前的操作 |
onStringTyped: (arrayPos, self) => {} | 输入每个字符之后的操作 |
onLastStringBackspaced: (self) => {} | 每句话输入完最后一个字符后的操作 |
onTypingPaused: (arrayPos, self) => {} | 打字停止后的操作 |
onTypingResumed: (arrayPos, self) => {} | 打字停止后再开始打字后的操作 |
onReset: (self) => {} | 复位后的操作 |
onStart: (arrayPos, self) => {} | 开始后的操作 |
onStop: (arrayPos, self) => {} | 停止后的操作 |
onDestroy: (self) => {} | 销毁后的操作 |
其它技巧
strings中使用``包裹命令模拟终端打字效果