插件描述：typed.js是一个类型库，输入任意字符串，它将以打字方式显示出来。您可以设置打字速度，退格等参数。
typed.js
typed.js是一个类型库，输入任意字符串，它将以打字方式显示出来。您可以设置打字速度，退格等参数。
安装
选一个
npm install typed.js yarn add typed.js bower install typed.js
CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
设置
这就是您开始所需的全部内容。
// 也可以包含在常规脚本标签中
import Typed from 'typed.js';
var options = {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 40
};
var typed = new Typed('.element', options);静态 HTML 的字符串 （SEO 友好）
与其使用字符串阵列插入字符串，不如在页面上放置 HTML div 并从中读取。这允许机器人和搜索引擎，以及具有 JavaScript 禁用的用户在页面上查看您的文本。
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script><div id="typed-strings"> <p>Typed.js is a <strong>JavaScript</strong> library.</p> <p>It <em>types</em> out sentences.</p> </div> <span id="typed"></span>
类型暂停
您可以通过包含转义字符在字符串中间暂停给定的时间。
var typed = new Typed('.element', {
// Waits 1000ms after typing "First"
strings: ['First ^1000 sentence.', 'Second sentence.']
});智能退格
在以下示例中，这只会退格“This is a”之后的单词
var typed = new Typed('.element', {
strings: ['This is a JavaScript library', 'This is an ES6 module'],
smartBackspace: true // Default value
});批量打字
以下示例将模拟终端在键入命令并查看其结果时的行为。
var typed = new Typed('.element', {
strings: ['git push --force ^1000\n `pushed to origin with option force`']
});CSS
CSS 动画建立在 JavaScript 的初始化之上。 但是，您可以随意自定义它们！ 这些类是：
/* Cursor */
.typed-cursor {
}
/* If fade out option is set */
.typed-fade-out {
}定制
var typed = new Typed('.element', {
/**
* @property {array} strings strings to be typed
* @property {string} stringsElement ID of element containing string children
*/
strings: [
'These are the default values...',
'You know what you should do?',
'Use your own!',
'Have a great day!'
],
stringsElement: null,
/**
* @property {number} typeSpeed type speed in milliseconds
*/
typeSpeed: 0,
/**
* @property {number} startDelay time before typing starts in milliseconds
*/
startDelay: 0,
/**
* @property {number} backSpeed backspacing speed in milliseconds
*/
backSpeed: 0,
/**
* @property {boolean} smartBackspace only backspace what doesn't match the previous string
*/
smartBackspace: true,
/**
* @property {boolean} shuffle shuffle the strings
*/
shuffle: false,
/**
* @property {number} backDelay time before backspacing in milliseconds
*/
backDelay: 700,
/**
* @property {boolean} fadeOut Fade out instead of backspace
* @property {string} fadeOutClass css class for fade animation
* @property {boolean} fadeOutDelay Fade out delay in milliseconds
*/
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
/**
* @property {boolean} loop loop strings
* @property {number} loopCount amount of loops
*/
loop: false,
loopCount: Infinity,
/**
* @property {boolean} showCursor show cursor
* @property {string} cursorChar character for cursor
* @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
*/
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
* @property {string} attr attribute for typing
* Ex: input placeholder, value, or just HTML text
*/
attr: null,
/**
* @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
*/
bindInputFocusEvents: false,
/**
* @property {string} contentType 'html' or 'null' for plaintext
*/
contentType: 'html',
/**
* Before it begins typing
* @param {Typed} self
*/
onBegin: (self) => {},
/**
* All typing is complete
* @param {Typed} self
*/
onComplete: (self) => {},
/**
* Before each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: (arrayPos, self) => {},
/**
* After each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: (arrayPos, self) => {},
/**
* During looping, after last string is typed
* @param {Typed} self
*/
onLastStringBackspaced: (self) => {},
/**
* Typing has been stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: (arrayPos, self) => {},
/**
* Typing has been started after being stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: (arrayPos, self) => {},
/**
* After reset
* @param {Typed} self
*/
onReset: (self) => {},
/**
* After stop
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: (arrayPos, self) => {},
/**
* After start
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: (arrayPos, self) => {},
/**
* After destroy
* @param {Typed} self
*/
onDestroy: (self) => {}
});
PREVIOUS:
NEXT:
相关插件-丰富的输入
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
