你的位置:首页 > Java教程

[Java教程]jQuery模拟打字逐字输出代码


效果查看:http://hovertree.com/texiao/jquery/70/

jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字

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>

转自:http://hovertree.com/h/bjaf/r3o7i9xq.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html