typinyin.js - 實現用拼音自動輸入中文特效的前端js插件

jopen 8年前發布 | 18K 次閱讀 JavaScript開發 typinyin.js

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

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！