typinyin.js - 实现用拼音自动输入中文特效的前端js插件

jopen 9年前

Typinyin.js

Demo演示

Typinyin.js 是受 Typed.js 启发而开发的一款js插件,无需jQuery即可使用。输入中文并输入相对应的拼音,即可呈现出自动用拼音输入文本的效果,并且会自动删除前一句话然后开始新的句子。


安装

~$ git clone https://github.com/classicoldsong/typinyin.js.git
<script src="typinyin.js"></script>  <script>      window.onload = function(){          var demo = new Typinyin;          demo.attach('#typinyin_demo');          demo.setOptions({              sentences: [                  {                      ch: ["这是","一个","示例"],                      py: ["zheshi","yige","shili"],                  }, {                      ch: ["This is an example."],                      py: ["This is an example."],                  }, {                      ch: ["完全","无需","jQuery"],                      py: ["wanquan","wuxu","jQuery"],                  }, {                      ch: ["让","输入","打动","你的","❤"],                      py: ["rang","shuru","dadong","nide","xin"],                  }              ],              startDelay: 1000, // 启动延时,以毫秒记              typeSpeed: 100, // 打字速度,以毫秒记              pause: 1000, // 每一句话打完后的停顿时间,以毫秒记              backSpeed: 60, // 删除文字的速度,以毫秒记              cursorChar: "|", // 光标字符              loop: false, // 是否循环播放          });          demo.init();          }  </script>  ...    <span id="typinyin_demo"></span>

如果希望增加光标闪烁动画的话,增加typinyin.css即可

<link rel="stylesheet" href="typinyin.css">

自定义播放结束事件

demo.finished = function() {      // 自定义内容  }

许可证:MIT

感谢 Matt Boldt 的光标CSS动画以及Demo页面模板

如有疑问或者建议欢迎PullRequest或者联系我的邮箱 syqlds@126.com

当然也欢迎访问我的博客 C次元


项目地址: https://github.com/ClassicOldSong/typinyin.js