钢琴案例

（按下1-9数字键，能触发对应的mouseenter事件）

1. 结合之前的学习，主要内容，就是on注册keyup事件，函数里传入e, 用e.keyCode，来获取1-9的数字的范围。

如果所按的按键在49-57的范围里，就去触发mouseenter(or mouseleave)事件。

怎么触发呢？让.nav li的索引下标等于（code-49）

2. 设置节流阀

  1.       //弹起的时候，触发mouseleave事件
  2.       $(document).on("keyup", function (e) {
  3.         // flag = true;
  4.         // //获取到按下的键
  5.         var code = e.keyCode;
  6.         if (code >= 49 && code <= 57) {
  7.           //触发对应的li的mouseleave事件
  8.           $(".nav li").eq(code - 49).mouseleave();
  9.         }
  10.       });

下面的代码是有bug的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Title</title>
  7.   <style>
  8.     * {
  9.       margin: 0;
  10.       padding: 0;
  11.       list-style: none;
  12.     }
  13.  
  14.     .nav {
  15.       width: 900px;
  16.       height: 60px;
  17.       background-color: black;
  18.       margin: 0 auto;
  19.     }
  20.  
  21.     .nav li {
  22.       width: 100px;
  23.       height: 60px;
  24.       /*border: 1px solid yellow;*/
  25.       float: left;
  26.       position: relative;
  27.       overflow: hidden;
  28.     }
  29.  
  30.     .nav a {
  31.       position: absolute;
  32.       width: 100%;
  33.       height: 100%;
  34.       font-size: 24px;
  35.       color: white;
  36.       text-align: center;
  37.       line-height: 60px;
  38.       text-decoration: none;
  39.       z-index: 2;
  40.     }
  41.  
  42.     .nav span {
  43.       position: absolute;
  44.       width: 100%;
  45.       height: 100%;
  46.       background-color: yellow;
  47.       top: 60px;
  48.     }
  49.   </style>
  50.   <script src="../jquery-1.12.4.js"></script>
  51.   <script>
  52.     $(function () {
  53.       //给li注册鼠标进入事件,让li下面的span top：0  播放音乐
  54.       $(".nav li").mouseenter(function () {
  55.         $(this).children("span").stop().animate({ top: 0 });
  56.         //播放音乐
  57.         var idx = $(this).index();
  58.         $(".nav audio").get(idx).load();
  59.         $(".nav audio").get(idx).play();
  60.       }).mouseleave(function () {
  61.         $(this).children("span").stop().animate({ top: 60 });
  62.       });
  63.  
  64.       //节流阀  ：按下的时候，触发，如果没弹起，不让触发下一次
  65.       //1. 定义一个flag
  66.       var flag = true;
  67.  
  68.       //按下1-9这几个数字键，能触发对应的mouseenter事件
  69.       $(document).on("keydown", function (e) {
  70.         if (flag) {
  71.           flag = false;
  72.           //获取到按下的键
  73.           var code = e.keyCode;
  74.           if (code >= 49 && code <= 57) {
  75.             //触发对应的li的mouseenter事件
  76.             $(".nav li").eq(code - 49).mouseenter();
  77.             // }
  78.           }
  79.         };
  80.       });
  81.  
  82.       //弹起的时候，触发mouseleave事件
  83.       $(document).on("keyup", function (e) {
  84.         flag = true;
  85.         //获取到按下的键
  86.         var code = e.keyCode;
  87.         if (code >= 49 && code <= 57) {
  88.           //触发对应的li的mouseleave事件
  89.           $(".nav li").eq(code - 49).mouseleave();
  90.         }
  91.       });
  92.     });
  93.   </script>
  94. </head>
  95.  
  96. <body>
  97.   <div class="nav">
  98.     <ul>
  99.       <li>
  100.         <a href="javascript:void(0);">导航1</a>
  101.         <span></span>
  102.       </li>
  103.       <li><a href="javascript:void(0);">导航2</a><span></span></li>
  104.       <li><a href="javascript:void(0);">导航3</a><span></span></li>
  105.       <li><a href="javascript:void(0);">导航4</a><span></span></li>
  106.       <li><a href="javascript:void(0);">导航5</a><span></span></li>
  107.       <li><a href="javascript:void(0);">导航6</a><span></span></li>
  108.       <li><a href="javascript:void(0);">导航7</a><span></span></li>
  109.       <li><a href="javascript:void(0);">导航8</a><span></span></li>
  110.       <li><a href="javascript:void(0);">导航9</a><span></span></li>
  111.     </ul>
  112.  
  113.     <div>
  114.       <audio src="mp3/1.ogg"></audio>
  115.       <audio src="mp3/2.ogg"></audio>
  116.       <audio src="mp3/3.ogg"></audio>
  117.       <audio src="mp3/4.ogg"></audio>
  118.       <audio src="mp3/5.ogg"></audio>
  119.       <audio src="mp3/6.ogg"></audio>
  120.       <audio src="mp3/7.ogg"></audio>
  121.       <audio src="mp3/8.ogg"></audio>
  122.       <audio src="mp3/9.ogg"></audio>
  123.     </div>
  124.   </div>
  125. </body>
  126.  
  127. </html>

jQuery---钢琴案例 （按下1-9数字键，能触发对应的mouseenter事件）的更多相关文章

  1. Linux Vi/Vim 在插入模式下键盘右边数字键输入异常

    问题:Linux在 Vi/Vim 在编辑文件时遇到一个问题,当我在 Insert 模式下进行修改文件内容的时候,用到了键盘(104键,右边带数字键那种)进行数字输入,当我输入数字 “5” 时,插入的数 ...

  2. jquery的change()：下拉框值改变时触发

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  3. jQuery 设置select，radio的值，无法自动触发绑定的change事件

    一.问题 今天在对select和radio做change事件绑定后,手动设置其value值,但是不能触发change事件 二.解决 使用trigger方法手动触发

  4. 【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件

    背景:基于Angular 6,引入ngx-ueditor 发现现象:如果以Shift键+任意键结尾,则ngModel会丢失包含shift键的字符 例如:输入“ABC+AB++++”,则ngModel中 ...

  5. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  6. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  7. jQuery常用案例总结

    模态对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. Jquery 分页案例

    Jquery    分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  9. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

随机推荐

  1. Android: 关于WebView的loadData方法

    关于WebView的loadData方法 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是Android应用开发 ...

  2. supervisor管理tomcat

    操作目的:用supervisor工具管理tomcat服务 配置环境,安装服务,以及多实例 脚本编辑: 前提 机器的opt目录下必须有jdk-8u131-linux-x64_.rpm 以及apache- ...

  3. AI: 字体设计中的贝塞尔曲线

    http://www.xueui.cn/tutorials/illustrator-tutorials/designers-must-know-the-secret-of-the-bezier-cur ...

  4. CCF_201512-1_数位之和

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ; cin >> ...

  5. POJ_2941_矩阵

    题目描述: 每组数据给定一个n*n的矩阵,选定不同行不同列的n个元素,求和,若所有选法所产生的和相等,则输出 homogeneous,否则输出not homogeneous. 描述: 数据挺大,爆搜肯 ...

  6. 微信小程序如何添加新的icon图标

    第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss 第 ...

  7. python学习（4）循环语句

    循环语句主要有两个,一个是 while :一个是for in range() 以案例来说明: 写一个猜数字的游戏,正确的数字等于38.如果数字等于38,则提示正确,然后结束:如果数字大于38则提示大了 ...

  8. CentOS 6.4安装mongo的php扩展包

    最近安装mongo相关内容,因mongodb下载好解压即可使用,在这里我就不多说了,这里我分享下如何安装mongo的php扩展 首先下载扩展包https://github.com/mongodb/mo ...

  9. Generalized end-to-end loss for speaker verification

    论文题目:2018_说话人验证的广义端到端损失 论文代码:https://google.github.io/speaker-id/publications/GE2E/ 地址:https://www.c ...

  10. prometheus operator（Kubernetes 集群监控）

    一.Prometheus Operator 介绍 Prometheus Operator 是 CoreOS 开发的基于 Prometheus 的 Kubernetes 监控方案,也可能是目前功能最全面 ...