最牛的打字效果JS插件 typing.js

最新在做公司的一個項目，需要實現一個敲打代碼的動畫效果，粗意味比較簡單，果斷自己直接開寫，寫着寫着發現是一個坑。需要支持語法高亮，並不能直接簡單的用setTimeout來動態附件innerHTML。苦思猛想數小時后，果斷用動態生成DOM的方法實現了整個效果。

typing.js的打印效果甚至能夠支持表格、按鈕、表單，只要你頁面能夠呈現出來的，都可以以一種動態輸出的感覺打印出來！ 強烈推薦觀看完整DEMO

我在網上查了一下，應該目前是沒有一個插件是和typing.js效果一致的！

 

瀏覽器兼容性方面已經測試通過（IE8-11、chrome、firefox、safari），由於虛擬機的鏡像丟失了，暫時沒有測試IE6-7。目測是沒有任何問題的。

低版本的IE需要手動引入es5-shim文件

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.min.js"></script>
<![endif]-->

 

typing.js使用非常簡單，在頁面底部或者Ready事件中執行相關代碼。

<script>
  var typing = new Typing({
    source: document.getElementById('source'),
    output: document.getElementById('output'),
    delay: 80
  });
  typing.start();
</script>

 

DEMO

針對有些博友對於執行DEMO會有Bug（多點幾下執行DEMO）的問題集中表達下意思：

這個問題我一開始就知道了。為什么不去做控制是有原因的：

本身這個插件的主要作用是自動播放動畫，而非是用戶觸發的。插件的暫時定位是頁面加載的時候做宣傳作用的。而在文章中，我是避免進來看文章的人看不到效果才弄成按鈕觸發而已。

當然后期會考慮在插件中加入Pause之類的暫停方法，以及防止類似這種Bug出現- -！

執行DEMO

Set( 'hello world!', out msg);
writeline(msg);
---------------------------
hello world!

|

在優化代碼后，已經放在github上，並建立了相關項目頁面。

項目主頁： http://coffeedeveloper.github.io/typing.js/
完整DEMO：http://coffeedeveloper.github.io/typing.js/demo.html
帶閃爍效果的代碼書寫DEMO：http://coffeedeveloper.github.io/typing.js/demo2.html

 

后期完成這個插件的2.0版本后，我將會將在這個插件上用到的一些相關技術點和思路整理成一篇博文，敬請期待^_^ 

 

如果你覺得這個插件有意思的話。可以點個贊給我或者在github項目上star一個，對我是莫大的鼓勵與幫助！