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

html代码

  1.     <!doctype html>
  2.     <html lang="zh">
  3.      <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <title>jQuery键盘打出逐字逐句显示特效</title><base target="_blank" />
  8.      <style>
  9.      body {
  10.      background-color: #F9F6EF;
  11.      color: #494949;
  12.      }
  13.  
  14.      .hovertree-content {
  15.      width: 95%;
  16.      max-width:900px;
  17.      height: auto;
  18.      margin-left: auto;
  19.      margin-right: auto;
  20.      padding: 10px;
  21.      border: 1px solid #D0D0D0;
  22.      background-color: #EFEFEF;
  23.      margin-top: 10px;
  24.      font-weight: bold;
  25.      line-height: 24px;
  26.      }
  27.      .hovertreeinfo{
  28.      text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';
  29.      }
  30.      .hovertreeinfo a{color:blue;}
  31.      </style>
  32.      <!--[if IE]>
  33.      <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
  34.      <![endif]-->
  35.      </head>
  36.      <body>
  37.  
  38.      <script type="text/javascript" src="/themes/sy/gggg336x280a.js"></script>
  39.      </div>
  40.      <div class="hovertree-content bgcolor-3">
  41.      <p class="word1"></p>
  42.      <p class="word2"></p>
  43.      </div>
  44.  
  45.      <script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
  46.      <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
  47.      <script src="js/l-by-l.min.js"></script>
  48.      <!--<script src="http://hovertree.com/texiao/jquery/70/js/l-by-l.min.js"></script>-->
  49.      <script>
  50.      jQuery(document).ready(function($){
  51.  
  52.      $(".word1").lbyl({
  53.      content: "受到网店的影响，服装店的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流，让何问起准备一下， 要在网上开网店，要为服装店建立网站。 何问起也没说自己经验不足，只说会积极准备。于是抓紧时间查找资料，学习练习。毕竟还是有功底的，过不多久就在本地搭建了一个网站，实现了一些企业网站的基本功能，信息产品发布、留言版等。也了解了在电商网开网店的方方面面。",
  54.      speed: 100,
  55.      type: 'show',
  56.      finished: function(){
  57.      $('.word2').lbyl({
  58.      content: "何问起准备好后，跟老板报告分析了具体情况，老板说人手不足，就从易到难逐步推行吧，有什么需要尽管提。何问起又有得忙活了，但也是乐此不疲。虽然学的是纺织，而不是计算机或者软件工程等相关专业，但自从接触编程以后，兴趣就一直有增无减，也熟悉了不少网站架设，Web前端，后端程序，数据库等等的知识，开了网站 hovertree.com ，有向全栈工程师发展的趋势。接受了老板的这个任务后更是开心，整天精力充沛，战斗力十足。",
  59.      speed: 150,
  60.      type: 'fade',
  61.      fadeSpeed: 500
  62.      })
  63.      } // Finished Callback
  64.      });
  65.  
  66.      });
  67.      </script>
  68.  
  69.      </body>
  70.      </html>

l-by-l.min.js

  1. !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);

彩色字体

代码

  1.      <html lang="zh">
  2.      <head>
  3.      <meta charset="UTF-8">
  4.      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <title>jQuery键盘打出逐字逐句彩色显示特效 </title>
  7.      <base target="_blank" />
  8.      <style>
  9.      body {
  10.      background-color: #F9F6EF;
  11.      color: #494949;
  12.      }
  13.  
  14.      .hovertree-content {
  15.      width: 95%;
  16.      max-width: 900px;
  17.      height: auto;
  18.      margin-left: auto;
  19.      margin-right: auto;
  20.      padding: 10px;
  21.      border: 1px solid #D0D0D0;
  22.      background-color: #EFEFEF;
  23.      margin-top: 10px;
  24.      font-weight: bold;
  25.      line-height: 24px;
  26.      }
  27.  
  28.      .hovertreeinfo {
  29.      text-align: center;
  30.      margin: 10px 0;
  31.      font: normal 14px/24px 'MicroSoft YaHei';
  32.      }
  33.  
  34.      .hovertreeinfo a {
  35.      color: blue;
  36.      }
  37.      </style>
  38.      <!--[if IE]>
  39.      <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
  40.      <![endif]-->
  41.      </head>
  42.      <body>
  43.      <div class="hovertreeinfo">
  44.      <h2>jQuery模拟键盘打字逐字逐句显示随机彩色文本</h2>
  45.      </div>
  46.      <div class="hovertree-content bgcolor-3">
  47.      <p class="word1"></p>
  48.      <p class="word2"></p>
  49.      <p class="word3"></p>
  50.      </div>
  51.  
  52.      <script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
  53.      <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
  54.      <script src="http://hovertree.com/texiao/jquery/70/js/lbyl.min.js"></script>
  55.      <script>
  56.      jQuery(document).ready(function($){
  57.  
  58.      $(".word1").lbyl({
  59.      content: "受到网店的影响，服装店的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流，让何问起准备一下， 要在网上开网店，要为服装店建立网站。 何问起也没说自己经验不足，只说会积极准备。于是抓紧时间查找资料，学习练习。毕竟还是有功底的，过不多久就在本地搭建了一个网站，实现了一些企业网站的基本功能，信息产品发布、留言版等。也了解了在电商网开网店的方方面面。",
  60.      speed: 100,
  61.      type: 'show',
  62.      hovertreeColors:['red','orange','deeppink','yellowgreen','green'],
  63.      finished: function(){
  64.      $('.word2').lbyl({
  65.      content: "何问起准备好后，跟老板报告分析了具体情况，老板说人手不足，就从易到难逐步推行吧，有什么需要尽管提。何问起又有得忙活了，但也是乐此不疲。虽然学的是纺织，而不是计算机或者软件工程等相关专业，但自从接触编程以后，兴趣就一直有增无减，也熟悉了不少网站架设，Web前端，后端程序，数据库等等的知识，开了网站 hovertree.com ，有向全栈工程师发展的趋势。接受了老板的这个任务后更是开心，整天精力充沛，战斗力十足。",
  66.      speed: 150,
  67.      type: 'fade',
  68.      fadeSpeed: 500,
  69.      hovertreeColors:['red','green','deeppink']
  70.      })
  71.      } // Finished Callback
  72.      });
  73.  
  74.      });
  75.  
  76.      setTimeout( function () {
  77.      $(".word3").lbyl({
  78.      content: "许多人都有各自的兴趣，如打球、踢毽子、看书、看电视、玩游戏等等....我近来迷上了猜灯谜，于是业余做了一个在线猜灯谜的网站：何问起谜语。这个猜谜的功能是之前做好的。最近想增加灯谜知识方面的文章，又不想再修改之前的项目。于是做了一个项目:HoverTreeTop，是ASP.NET项目，实现了文章的添加修改和生成静态页。内容管理面板是一个项目，生成的静态页面可以灵活配置在指定位置，内容管理和最终生成页面是可以分开的，于是基本不用修改之前的项目，就能在原来猜灯谜功能的基础上增加了灯谜知识分享的功能。现在流行说无图无真相，用在开发方面可以说没有效果预览就没真相，于是先发个地址看看：http://m.hovertree.com/dmyd/ 这就是初步完成的页面。这是一个新的例子：http://hovertree.com/top/",
  79.      speed: 100,
  80.      type: 'show',
  81.      hovertreeColors: ['red', 'deeppink', 'blue', 'yellowgreen', 'green'],
  82.      finished: function () {
  83.      } // Finished Callback
  84.      });
  85.      },3000)
  86.  
  87.      </script>
  88.  
  89.      </body>
  90.      </html>
  1. lbyl.min.js
  1. /* by 何问起 hovertree.com */
  2. !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模拟键盘打字逐字逐句显示文本的更多相关文章

  1. C语言：读TXT 模拟键盘打字输出

    //#include<ctype.h> #include<stdio.h> #include <windows.h> //#include "string ...

  2. 使用jquery模拟键盘事件，但window系统并不会真的响应事件，只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  3. jQuery模拟打字逐字输出代码

    效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...

  4. 使用C#模拟键盘输入、鼠标移动和点击、设置光标位置及控制应用程序的显示

    1.模拟键盘输入(SendKeys) 功能:将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法:SendKeys.Send(string keys);SendKeys.SendWa ...

  5. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  6. SendInput模拟键盘输入的问题

    SendInput模拟键盘输入的问题  http://www.cnblogs.com/yedaoq/archive/2010/12/30/1922305.html 最近接触到这个函数,因此了解了一下, ...

  7. C# 模拟键盘操作--SendKey(),SendKeys()

    模拟键盘输入就是使用以下2个语法实现的.SendKeys.Send(string keys);  //模拟汉字(文本)输入SendKeys.SendWait(string keys); //模拟按键输 ...

  8. C# 模拟键盘操作SendKey(),SendKeys()

    模拟键盘输入就是使用以下2个语法实现的. SendKeys.Send(string keys);  //模拟汉字(文本)输入SendKeys.SendWait(string keys); //模拟按键 ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. 全能中间件 REST API 使用手册

    全能中间件 REST API 使用手册 Ver:17.6.24 技术支持QQ:64445322 QQ群:339616649    任何第三方应用或网站都可以通过使用开放API为用户提供实时优质的服务. ...

  2. Fiddler讲解3

    想要 浏览更多Fiddler内容:请点击进入Fiddler官方文档 阅读目录: 一.Fiddler自定义请求: 二.Fiddler修改请求: 三.减少期望的延迟:100个继续标题: 四.重命名无效的P ...

  3. Mybatis整合（Redis、Ehcache）实现二级缓存

    目的: Mybatis整合Ehcache实现二级缓存 Mybatis整合Redis实现二级缓存 Mybatis整合ehcache实现二级缓存 ssm中整合ehcache 在POM中导入相关依赖 < ...

  4. 修改mysql远程数据库链接密码（转）

    原文:https://blog.csdn.net/jianjiao7869/article/details/81029171 原来root用户有两个,一个只允许localhost登陆,一个可运行所有用 ...

  5. Linux Nginx的权限——访问本地目录报错403

    在安装好FastDFS并成功上传图片文件后,根据FastDFS返回的文件地址无法通过HTTP(即浏览器)访问到,报错404或者403. 不管是Error 404还是Error 403,基本都是Ngin ...

  6. VMWare打开centos，提示内部错误

    如题,VMWare打开centos,提示内部错误.该原因是因为服务被停止了之后没有将其启动,将其启动就解决了. CMD客户端输入命令 services.msc 将关于VM的服务启动就可以了

  7. C#委托，匿名方法，Lambda，泛型委托，表达式树代码示例

    第一分钟:委托 有些教材,博客说到委托都会提到事件,虽然事件是委托的一个实例,但是为了理解起来更简单,今天只谈委托不谈事件.先上一段代码: 下边的代码,完成了一个委托应用的演示.一个委托分三个步骤: ...

  8. POJ1475(Pushing Boxes)--bbffss

    题目在这里 题目一看完就忙着回忆童年了.推箱子的游戏. 假设只有一个箱子.游戏在一个R行C列的由单位格子组成的区域中进行,每一步, 你可以移动到相邻的四个格子中的一个,前提是那个格子是空的:或者,如果 ...

  9. VBA for循环

    for循环是一种重复控制结构,它允许开发人员有效地编写需要执行特定次数的循环. 语法 以下是VBA中for循环的语法. For counter = start To end [Step stepcou ...

  10. [技术翻译]预加载响应式图像，从Chrome 73开始实现

    本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...