【前端庫】typed.js 打字機效果
阿新 • • 發佈：2018-12-29
前提
引入js庫
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>手冊
new Typed()
使用new例項化
new Typed('引數一','引數二');| Typed引數 | 引數說明 |
|---|---|
| 引數一 | obj型別，元素物件，將文字放入元素內，進行看效果，==注意：如果是div的話，塊級標籤，最好轉換為內聯，display: inline;== |
| 引數二 | json型別，引數如下： |
| Typed引數二的引數 | 引數說明 |
|---|---|
| strings | 陣列型別,裡面存放文字內容，輸出的文字。從下標0開始，列印第一個，從新覆蓋，打印出第二個。==注意：輸出標籤時，在input會直接輸出標籤，如果在一個div內，會當標籤執行掉== |
| stringsElement | ==不知道是啥，官方沒有給答案== |
| typeSpeed | number型別，列印的速度。數值越大，速度越慢。 |
| startDelay | number型別，前面延遲時間（不用寫單位，預設是ms毫秒） |
| backSpeed | number 型別，往後退（跟刪除差不多，相當於我們按backSpace鍵，不是刪除，而是退後。del鍵是刪除），列印第一段後，便後退速度多少秒。單位毫秒。 |
| shuffle | boolean型別，==不知道是啥== |
| smartBackspace | boolean型別，==不知道是啥== |
| backDelay | number型別，當要後退的時候，延遲時間後才後退，值越大，延遲的時間就越長。 |
| fadeOut | boolean型別，開啟運動效果，==和下面的fadeOutClass和fadeOutDelay才能看出效果== |
| fadeOutClass | string 型別，比如：’typed-fade-out’值 |
| fadeOutDelay | number 型別，設定淡出為毫秒為單位。 |
| loop | boolean布林型別，設定迴圈，為真，開啟迴圈。==和下面loopCount一起使用，才能弄出效果== |
| loopCount | 設定迴圈次數，值為：Infinity（不是字串，直接貼上過去使用）時, 便會無限迴圈。也可以使用數值 |
| showCursor | boolean型別，預設開啟游標，為真開啟，那麼還得設定css將元素設定為內聯元素即可。 |
| cursorChar | string型別，游標的符號，比如：’^’ |
| autoInsertCss | true 型別，將游標插入到html中 |
| attr | string型別， 可以將文字輸入到輸入框placeholder屬性中，也可以輸入框的value值裡面，還可以輸入到html文字（值就是null預設），最後還有可以自定義個html屬性中顯示列印效果（可以在控制檯中顯示） |
| bindInputFocusEvents | boolean型別，為真，在輸入框中，如果是列印的時候，把游標進入焦點後，則停止列印。預設是為假，進入輸入框焦點則不停止列印。 |
| contentType | string型別，有兩個引數：’html’或者’null’，預設是html，值為html時，將列印的文字標籤直接解析html標籤。如果是’null’則，將直接輸出標籤字串。 |
| onComplete | function 型別，當列印完成後，執行回撥函式，接收一個引數是全域性物件，裡面有很多設定方法屬性。 |
| preStringTyped | function 型別，在字串打印出來之前，回撥函式。接收兩個引數，第一個是arrayPos的值，第二個是全域性物件，和上面一樣。 |
| onStringTyped | function 型別，在列印輸出字串之後。接收兩個引數，引數一：是arrayPos值。引數二：全域性物件，和上面一樣 ==沒成功== |
| onLastStringBackspaced | function型別，在迴圈列印輸出到最後一個字串之後觸發回撥函式。所以這裡必須得設定迴圈屬性才可以。==沒成功== |
| onTypingPaused | function型別，列印停止才會觸發。當onStop()實現停止了後才觸發。 |
| onTypingResumed | function 型別，打字在停止後才開始觸發。當onStop()實現停止了後才觸發。 |
| reset() | 方法，重置後。可以通過例項化後的物件，進行呼叫此方法 |
| stop() | 方法，停止。可以通過例項化後的物件，可以通過例項化後的物件，進行呼叫此方法 |
| start() | 方法，開始。可以通過例項化後的物件，可以通過例項化後的物件，進行呼叫此方法 |
| toggle() | 方法，用於切換onStop與onStart之間。可以通過例項化後的物件，進行呼叫此方法 |
| destroy() | 方法，如果是不在使用此物件，那麼可以使用這個方法銷燬例項物件。==並沒有刪除例項化物件，實際功能是銷燬當前的物件內容 ，但是也不算是銷燬，還能單擊開始，有點像是重置== |
設定游標閃動，必須得加上css樣式，還得在js裡面將打印出來的文字內新增 ^1000
.typed-cursor{
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
.typed-fade-out{
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}游標閃爍的例項
<style>
.typed-cursor{
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
.typed-fade-out{
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}
</style>
<div id="element"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
var options = {
// 閃爍游標必須得有：上面的css和下面字串內新增 ^1000 ，只要是當輸入到^1000就解析閃爍的時間，1000ms。
strings: ["<i>我是第一段</i>哦哦哦 ^1000 哦！", "我是第二段",'我是第三段'],
typeSpeed: 40
}
var typed = new Typed("#element", options);
</script>strings 與 typeSpeed
<div id="element"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
var options = {
//
strings: ["<i>我是第一段</i>哦哦哦哦！", "我是第二段",'我是第三段'],
typeSpeed: 40
}
var typed = new Typed("#element", options);
</script>startDelay 執行後，延遲多少毫秒在開始出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#text,#element {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div id="element"></div>
<input type="text" id="text" name="">
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
var options = {
strings: ["<h2>下面的還沒出來</h2>哦！", "我都第二段了",'我不延時我不延時我不延時我不延時我不延時'],
typeSpeed: 80,
startDelay: 1000 // 延時一秒後在執行
}
var option = {
strings: ["<h2>我是第一段</h2>！", "我是第二段",'我延時，我延時，我延時，我延時，我延時，我延時，我延時，我延時，我延時，'],
typeSpeed: 80
}
// console.log(new start());
var typed = new Typed("#text", options);
var typed = new Typed("#element", option);
</script>
</body>
</html>contentType 設定標籤解析
<span id="element1"></span>
<span id="element2"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
var options = {
strings: ["<h2>我是H2標籤</h2>！", "'],
typeSpeed: 80,
contentType : 'null' // 將標籤
}
var typed = new Typed("#element1", options);
var option = {
strings: ["<h2>我是H2標籤</h2>！", "],
typeSpeed: 80,
contentType : 'null' // 將標籤
}
var typed = new Typed("#element2", option);
</script>呼叫 toggle()、start()、stop()、reset()
<span id="element"></span>
<br />
<button id="btn1">開始列印</button>
<button id="btn2">暫停列印</button>
<button id="btn3">暫停或者開始</button>
<button id="btn4">重置</button>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script type="text/javascript">
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
var option = {
strings: ['我是字串內我是字串內我是字串內我是字串內我是字串內我是字串內>'],
typeSpeed: 80,
loop:true,
loopCount:Infinity
}
var typed = new Typed("#element", option);
btn1.onclick = function () {
typed.start();
}
btn2.onclick = function () {
typed.stop();
}
btn3.onclick = function () {
typed.toggle();
}
btn4.onclick = function () {
typed.reset();
}
</script>由於本人不會組織語言，有不足地方或不理解地方可以說。看到了一定回覆。