钢琴案例

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

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

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

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

2. 设置节流阀

      //弹起的时候，触发mouseleave事件

      $(document).on("keyup", function (e) {

        // flag = true;

        // //获取到按下的键

        var code = e.keyCode;

        if (code >= 49 && code <= 57) {

          //触发对应的li的mouseleave事件

          $(".nav li").eq(code - 49).mouseleave();

        }

      });

下面的代码是有bug的

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    .nav {

      width: 900px;

      height: 60px;

      background-color: black;

      margin: 0 auto;

    }

    .nav li {

      width: 100px;

      height: 60px;

      /*border: 1px solid yellow;*/

      float: left;

      position: relative;

      overflow: hidden;

    }

    .nav a {

      position: absolute;

      width: 100%;

      height: 100%;

      font-size: 24px;

      color: white;

      text-align: center;

      line-height: 60px;

      text-decoration: none;

      z-index: 2;

    }

    .nav span {

      position: absolute;

      width: 100%;

      height: 100%;

      background-color: yellow;

      top: 60px;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //给li注册鼠标进入事件,让li下面的span top：0  播放音乐

      $(".nav li").mouseenter(function () {

        $(this).children("span").stop().animate({ top: 0 });

        //播放音乐

        var idx = $(this).index();

        $(".nav audio").get(idx).load();

        $(".nav audio").get(idx).play();

      }).mouseleave(function () {

        $(this).children("span").stop().animate({ top: 60 });

      });

      //节流阀  ：按下的时候，触发，如果没弹起，不让触发下一次

      //1. 定义一个flag

      var flag = true;

      //按下1-9这几个数字键，能触发对应的mouseenter事件

      $(document).on("keydown", function (e) {

        if (flag) {

          flag = false;

          //获取到按下的键

          var code = e.keyCode;

          if (code >= 49 && code <= 57) {

            //触发对应的li的mouseenter事件

            $(".nav li").eq(code - 49).mouseenter();

            // }

          }

        };

      });

      //弹起的时候，触发mouseleave事件

      $(document).on("keyup", function (e) {

        flag = true;

        //获取到按下的键

        var code = e.keyCode;

        if (code >= 49 && code <= 57) {

          //触发对应的li的mouseleave事件

          $(".nav li").eq(code - 49).mouseleave();

        }

      });

    });

  </script>

</head>

<body>

  <div class="nav">

    <ul>

      <li>

        <a href="javascript:void(0);">导航1</a>

        <span></span>

      </li>

      <li><a href="javascript:void(0);">导航2</a><span></span></li>

      <li><a href="javascript:void(0);">导航3</a><span></span></li>

      <li><a href="javascript:void(0);">导航4</a><span></span></li>

      <li><a href="javascript:void(0);">导航5</a><span></span></li>

      <li><a href="javascript:void(0);">导航6</a><span></span></li>

      <li><a href="javascript:void(0);">导航7</a><span></span></li>

      <li><a href="javascript:void(0);">导航8</a><span></span></li>

      <li><a href="javascript:void(0);">导航9</a><span></span></li>

    </ul>

    <div>

      <audio src="mp3/1.ogg"></audio>

      <audio src="mp3/2.ogg"></audio>

      <audio src="mp3/3.ogg"></audio>

      <audio src="mp3/4.ogg"></audio>

      <audio src="mp3/5.ogg"></audio>

      <audio src="mp3/6.ogg"></audio>

      <audio src="mp3/7.ogg"></audio>

      <audio src="mp3/8.ogg"></audio>

      <audio src="mp3/9.ogg"></audio>

    </div>

  </div>

</body>

</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. Django部署--uwsgi配置--nginx服务器配置

    uwsgi.ini文件 [uwsgi] #使用nginx连接时使用,Django程序所在服务器地址 socket=127.0.0.1:8000 #直接做web服务器使用,Django程序所在服务器地址 ...

  2. TypeScript躬行记（6）——高级类型

    本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...

  3. DotNetty发送请求的最佳实践

    长链接发送request/response时, 绝大部分包都是小包, 而每个小包都要消耗一个IP包, 成本大约是20-30us, 普通千兆网卡的pps大约是60Wpps, 所以想要提高长链接密集IO的 ...

  4. selenium 操作下拉处理

    操作下拉框处理 在网页中,有时候会遇到下拉框处理,这时候使用Webdriver提供的select类来处理. ##操作下拉框处理 #coding = utf-8 from selenium import ...

  5. 【原创】为什么Mongodb索引用B树，而Mysql用B+树?

    引言 好久没写文章了,今天回来重操旧业.毕竟现在对后端开发的要求越来越高,大家要做好各种准备. 因此,大家有可能遇到如下问题 为什么Mysql中Innodb的索引结构采取B+树? 回答这个问题时,给自 ...

  6. 机器学习（ML）十三之批量归一化、RESNET、Densenet

    批量归一化 批量归一化(batch normalization)层,它能让较深的神经网络的训练变得更加容易.对图像处理的输入数据做了标准化处理:处理后的任意一个特征在数据集中所有样本上的均值为0.标准 ...

  7. 曹工说Spring Boot源码（19）-- Spring 带给我们的工具利器，创建代理不用愁（ProxyFactory）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  8. 不会用数据可视化大屏？一招教你轻松使用数据可视化BI软件创建农业公司运营数据分析大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以农业公司运营数据分析大屏 ...

  9. 手把手教你使用数据可视化BI软件创建仓库可视化管理大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以仓库可视化管理大屏为例为 ...

  10. linux中find文件搜索命令

    find 解释 命令名称:find 命令所在路径:/bin/find 执行权限:所有用户 功能描述:文件搜索 语法 find [搜索范围] [匹配条件] 匹配条件: -name 文件名(区分大小写) ...