jQuery模拟键盘打字逐字逐句显示文本

Posted 一梦_浮生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery模拟键盘打字逐字逐句显示文本相关的知识,希望对你有一定的参考价值。

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: 95%;
     max-width:900px;
     height: auto;
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
     border: 1px solid #D0D0D0;
     background-color: #EFEFEF;
     margin-top: 10px;
     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>
      
     <script type="text/javascript" src="/themes/sy/gggg336x280a.js"></script>
     </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="js/l-by-l.min.js"></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>
      
      
     </body>
     </html>

l-by-l.min.js 

!function(e){e.fn.lbyl=function(n){{var t=e.extend({content:"",speed:10,type:"fade",fadeSpeed:500,finished:function(){}},n),d=e(this),s=[],i=t.content;e(this).length}d.empty(),d.attr("data-time",i.length*t.speed);for(var p=0;p<i.length;p++)s.push(i[p]);e.each(s,function(e,n){d.append(\'<span style="display: none;">\'+n+"</span>"),setTimeout(function(){"show"==t.type?d.find("span:eq("+e+")").show():"fade"==t.type&&d.find("span:eq("+e+")").fadeIn(t.fadeSpeed)},e*t.speed)}),setTimeout(function(){t.finished()},i.length*t.speed)}}(jQuery);

 

 

彩色字体

代码

 

     
     <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: 95%;
     max-width: 900px;
     height: auto;
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
     border: 1px solid #D0D0D0;
     background-color: #EFEFEF;
     margin-top: 10px;
     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>
     <p class="word3"></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/lbyl.min.js"></script>
     <script>
     jQuery(document).ready(function($){
      
     $(".word1").lbyl({
     content: "受到网店的影响,服装店的生意逐渐有所下降,老板找何问起去谈,大概是准备跟上网购潮流,让何问起准备一下, 要在网上开网店,要为服装店建立网站。 何问起也没说自己经验不足,只说会积极准备。于是抓紧时间查找资料,学习练习。毕竟还是有功底的,过不多久就在本地搭建了一个网站,实现了一些企业网站的基本功能,信息产品发布、留言版等。也了解了在电商网开网店的方方面面。",
     speed: 100,
     type: \'show\',
     hovertreeColors:[\'red\',\'orange\',\'deeppink\',\'yellowgreen\',\'green\'],
     finished: function(){
     $(\'.word2\').lbyl({
     content: "何问起准备好后,跟老板报告分析了具体情况,老板说人手不足,就从易到难逐步推行吧,有什么需要尽管提。何问起又有得忙活了,但也是乐此不疲。虽然学的是纺织,而不是计算机或者软件工程等相关专业,但自从接触编程以后,兴趣就一直有增无减,也熟悉了不少网站架设,Web前端,后端程序,数据库等等的知识,开了网站 hovertree.com ,有向全栈工程师发展的趋势。接受了老板的这个任务后更是开心,整天精力充沛,战斗力十足。",
     speed: 150,
     type: \'fade\',
     fadeSpeed: 500,
     hovertreeColors:[\'red\',\'green\',\'deeppink\']
     })
     } // Finished Callback
     });
      
     });
      
     setTimeout( function () {
     $(".word3").lbyl({
     content: "许多人都有各自的兴趣,如打球、踢毽子、看书、看电视、玩游戏等等....我近来迷上了猜灯谜,于是业余做了一个在线猜灯谜的网站:何问起谜语。这个猜谜的功能是之前做好的。最近想增加灯谜知识方面的文章,又不想再修改之前的项目。于是做了一个项目:HoverTreeTop,是ASP.NET项目,实现了文章的添加修改和生成静态页。内容管理面板是一个项目,生成的静态页面可以灵活配置在指定位置,内容管理和最终生成页面是可以分开的,于是基本不用修改之前的项目,就能在原来猜灯谜功能的基础上增加了灯谜知识分享的功能。现在流行说无图无真相,用在开发方面可以说没有效果预览就没真相,于是先发个地址看看:http://m.hovertree.com/dmyd/ 这就是初步完成的页面。这是一个新的例子:http://hovertree.com/top/",
     speed: 100,
     type: \'show\',
     hovertreeColors: [\'red\', \'deeppink\', \'blue\', \'yellowgreen\', \'green\'],
     finished: function () {
     } // Finished Callback
     });
     },3000)
      
     </script>
      
      
     </body>
     </html>

 

lbyl.min.js
/* by 何问起 hovertree.com */
!function (e) { e.fn.lbyl = function (n) { var t = e.extend({ content: "", speed: 10, type: "fade", fadeSpeed: 500, finished: function () { }, hovertreeColors: ["deeppink", "red", "green"] }, n), d = e(this), s = [], i = t.content; e(this).length; d.empty(), d.attr("data-time", i.length * t.speed); var htlength = t.hovertreeColors.length; for (var p = 0; p < i.length; p++) { s.push(i[p]) } e.each(s, function (e, n) { d.append(\'<span style="display: none;color:\' + t.hovertreeColors[Math.floor(Math.random() * htlength)] + \'">\' + n + "</span>"), setTimeout(function () { "show" == t.type ? d.find("span:eq(" + e + ")").show() : "fade" == t.type && d.find("span:eq(" + e + ")").fadeIn(t.fadeSpeed) }, e * t.speed) }), setTimeout(function () { t.finished() }, i.length * t.speed) } }(jQuery);

 

以上是关于jQuery模拟键盘打字逐字逐句显示文本的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 动画只逐字渲染文本

在 Xcode 6 中,如何使用硬件键盘但在 iOS 模拟器中显示软件键盘

如何使用 jQuery 模拟打字?

虚拟键盘 jquery 在引导模式中显示不正确

文本字段在 iOS 模拟器上不显示键盘

从片段导航到另一个片段时隐藏键盘