效果查看：http://hovertree.com/texiao/jquery/70/
jQuery鍵盤打出逐字逐句顯示特效，逐字逐句顯示文字
還可以設置每個文字隨機顏色：
http://hovertree.com/texiao/jquery/70/color.htm
效果圖如下：
HTML代碼如下：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery模擬打字逐字輸出代碼 - 何問起</title><base target="_blank" /> <style> body { background-color: #F9F6EF; color: #494949; } .hovertree-content { width: 820px; max-width:900px; height: auto; margin-left: auto; margin-right: auto; padding: 20px; border: 1px solid #D0D0D0; background-color: #EFEFEF; margin-top: 20px; font-weight: bold; line-height: 24px; } .hovertreeinfo{ text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei'; } .hovertreeinfo a{color:blue;} </style> <!--[if IE]> <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="hovertreeinfo"><h2>jQuery模擬打字逐字輸出代碼</h2></div> <div class="hovertree-content bgcolor-3"> <p class="word1"></p> <p class="word2"></p> </div> <script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script> <script src="http://hovertree.com/texiao/jquery/70/js/l-by-l.min.js"></script> <script> jQuery(document).ready(function($){ $(".word1").lbyl({ content: "受到網店的影響，服裝店的生意逐漸有所下降，老板找何問起去談，大概是准備跟上網購潮流，讓何問起准備一下， 要在網上開網店，要為服裝店建立網站。 何問起也沒說自己經驗不足，只說會積極准備。於是抓緊時間查找資料，學習練習。畢竟還是有功底的，過不多久就在本地搭建了一個網站，實現了一些企業網站的基本功能，信息產品發布、留言版等。也了解了在電商網開網店的方方面面。", speed: 100, type: 'show', finished: function(){ $('.word2').lbyl({ content: "何問起准備好后，跟老板報告分析了具體情況，老板說人手不足，就從易到難逐步推行把，有什么需要盡管提。何問起又有得忙活了，但也是樂此不疲。雖然學的是紡織，而不是計算機或者軟件工程等相關專業，但自從接觸編程以后，興趣就一直有增無減，也熟悉了不少網站架設，Web前端，后端程序，數據庫等等的知識，開了網站 hovertree.com ，有向全棧工程師發展的趨勢。接受了老板的這個任務后更是開心，整天精力充沛，戰斗力十足。", speed: 150, type: 'fade', fadeSpeed: 500 }) } // Finished Callback }); }); </script> <div class="hovertreeinfo"> <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/r3o7i9xq.htm">原文</a></p> </div> </body> </html>