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

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

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

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

 

瀏覽器兼容性方面已經測試經過（IE8-十一、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一個，對我是莫大的鼓勵與幫助！