最牛的打字效果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一个，对我是莫大的鼓励与帮助！