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

最新推荐文章于 2024-03-27 09:37:41 发布

转载最新推荐文章于 2024-03-27 09:37:41 发布 · 144 阅读

文章标签：

#javascript #运维 #ViewUI

介绍typing.js，一款用于创建敲打代码动画效果的JavaScript库。它不仅支持语法高亮，还能动态输出表格、按钮等元素。适用于多种浏览器环境，包括IE8-11、Chrome、Firefox及Safari。

原文：http://www.cnblogs.com/coffeedeveloper/p/3852894.html#2989479

项目网站：http://coffeedeveloper.github.io/typing.js/index.html

最新在做公司的一个项目，需要实现一个敲打代码的动画效果，粗意味比较简单，果断自己直接开写，写着写着发现是一个坑。需要支持语法高亮，并不能直接简单的用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>