jQuery---鋼琴案例（按下1-9數字鍵，能觸發對應的mouseenter事件）

-Advertisement-

鋼琴案例（按下1-9數字鍵，能觸發對應的mouseenter事件） 1. 結合之前的學習，主要內容，就是on註冊keyup事件，函數里傳入e, 用e.keyCode，來獲取1-9的數字的範圍。如果所按的按鍵在49-57的範圍里，就去觸發mouseenter(or mouseleave)事件。怎 ...

鋼琴案例

（按下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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

如何將文本放置在div的底部顯示呢？

轉自：將文本定位於div的底部的方法摘要: 下文講述將文本放於div的底部的兩種方法，如下所示: 實現思路: 思路1:採用絕對定位的方式，將其放置於div的底部思路2:使用Line-height屬性將文本放置於div的底部行高大小設置的計算公式:(height-(font-size/2))x2 ...
jQuery---$衝突的解決方案

$衝突的解決方案遇到其他js文件也用$包裝了函數。可以把jQuery放在後面，並釋放下$的控制權，也可以換個字元替代原來的$，例如$$ 或者，jQuery //jQuery釋放$的控制權 $$ = $.noConflict(); <!DOCTYPE html> <html lang="zh-CN" ...
js函數的使用+封裝+代碼復用

javascript 函數 return 後面沒有返回值代表提早退出語句，return後面的語句都不再執行此時返回值為undefined <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document< ...
jQuery---each方法

each方法 each方法 //each方法 $("li").each(function (index, element) { $(element).css("opacity", (index + 1) / 10); }) for迴圈方法 for (var i = 0; i < $("li").le ...
jQuery---五角星評分案例

五角星評分案例 1. 滑鼠經過li的時候，當前的位置是實心五角星，前面的是實心。當前位置後面的是空心。註意此處不能完全用鏈式編程寫到底 2. 滑鼠離開，comment的所有孩子變為空心五角星。額外，找到current, 讓current和它的前面都是實心。 3. 點擊li的時候，當前的位置增加個cu ...
JavaScript中條件分支語句和迴圈語句的使用，用簡潔的代碼實現強大功能

if() else if() else() alert() 彈出警告框 prompt() 輸入框，確定：返回輸入信息；取消：返回null <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</t ...
jQuery---鏈式編程

鏈式編程設置性操作：可以鏈式編程獲取性操作，不能鏈式，因為獲取性操作，數值，字元串，返回值是不是一個jq對象。 $(function () { //設置性操作：可以鏈式編程 //獲取性操作，不能鏈式，因為獲取性操作，數值，字元串，返回值是不是一個jq對象。 $("div").width(200) ...
圖解HTTP----讀書筆記

HTTP的歷史 3 項 WWW 構建技術，分別是：把 SGML（Standard Generalized Markup Language，標準通用標記語言）作為頁面的文本標記語言的 HTML（HyperText Markup Language，超文本標記語言）；作為文檔傳遞協議的 HTTP ；指定 ...

jQuery---鋼琴案例 （按下1-9數字鍵，能觸發對應的mouseenter事件）

鋼琴案例

jQuery---鋼琴案例（按下1-9數字鍵，能觸發對應的mouseenter事件）