jQuery模拟打字逐字输出代码
效果查看：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>
