Giter VIP home page Giter VIP logo

typing.js's Introduction

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

当前版本1.4

Demo Demo2

引入相关文件

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

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

<script>
  var typing = new Typing({
    source: document.getElementById('source'),
    output: document.getElementById('output'),
    delay: 80,
    done: function() {} //完成打印后的回调事件
  });
  typing.start();
</script>

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

typing-cursortyping-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>
  • 回退删除效果
  • 块状元素的鼠标闪烁输入效果
  • 放入bower包管理,方便引用

接口说明

实例化typing后即可使用下面接口

start:开始打印文字
typing.start();
pause:暂停打印
typing.pause();
resume:恢复打印
typing.resume();
<div>
  <span data-type="back">通过设置元素的data-type="back"来达到回退删除的效果</span>
  <span>上面的文本被删除完毕后才会出现的文本</span>
  <h1 data-delay="200">重点文本,可以设置高的延迟时间。通过设置data-delay="200"来设置打印效果的毫秒数</h1>
</div>
  • 1.4
    • 增加UMD模块加载
  • 1.3
    • 增加打印完成后的回调函数
  • 1.2
    • 移除对es5-shim的依赖
  • 1.1
    • 修复IE8会报错的bug(Array.prototype.slice改为用for)

typing.js's People

Contributors

coffeedeveloper avatar navyxie avatar jnozsc avatar

Stargazers

cuihuale avatar

Watchers

cuihuale avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.