Typing.js

This project is maintained by coffeedeveloper

史上最华丽的打字效果JS插件

查看完整DEMO查看带闪烁光标DEMO

当前版本1.1

引入相关文件

  <!--引入鼠标闪烁效果CSS(可选)-->
  <link rel="stylesheet" href="typing.css">
  <!--引入typing.js，核心文件-->
  <script src="typing.js"></script>

浏览器说明 需要在页面上面引用es5-shim库来兼容插件里面用到的forEach数组用法

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

在页面底部或者Ready事件中执行相关代码

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

鼠标闪烁效果，暂时只支持内容都是行内元素的内容

typing-cursor和typing-cursor-black都是闪烁的黑色光标，而typing-cursor-white则是闪烁的黑色光标。 请注意要在span里面放置内容|

<div id="source">
  这里的呈现效果是有鼠标跟随的！<br />
  还不错吧？
</div>
<div id="output-wrap">
  <span id="output"></span>
  <span class="typing-cursor">|</span>
</div>

todo

接口说明（尚未实现）

<div>
  <span data-type="back">通过设置元素的data-type="back"来达到回退删除的效果</span>
  <span>上面的文本被删除完毕后才会出现的文本</span>
  <h1 data-delay="200">重点文本，可以设置高的延迟时间。通过设置data-delay="200"来设置打印效果的毫秒数</h1>
</div>

更新记录