音乐导航

时间：2019-09-15 20:29:04 阅读：136 评论：0 收藏：0 [点我收藏+]

技术分享图片

布局：

div.nav > ul + div

ul > li*9 > a + span

div > audio*9

案例分析：

起初，每个小li 中有一个 span 作为它的背景，隐藏在下面（top:60)

当鼠标移到某个小 li 的上方，该小 li 中的 span 会从下往上渐渐显示，(top:0)

并且，对应的小 li 的音乐开始播放

jQuery 代码

$(".nav  li").mouseenter(function(){
   $(this).children("span").stop().animate({top : 0});
   var index = $(this).index();
   $("audio").get(index).load();  //get(),不用 eq(),音乐播放的方法是DOM对象
   $("audio").get(index).play();
})
.mouseleave(function(){
   $(this).children("span").stop().animate({top : 60});
})

完整代码：

<!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: blue;
      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 () {
      $(".nav li").mouseenter(function () {
        $(this).children("span").stop().animate({top:0});
        
        var idx = $(this).index();
        //让对应的音乐播放, 音乐播放的方法时DOM对象。
        $("audio").get(idx).load();
        $("audio").get(idx).play();
      }).mouseleave(function () {
        $(this).children("span").stop().animate({top:60});
      });
      
      
      
    });
  </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>

音乐导航

原文：https://www.cnblogs.com/shanlu0000/p/11523692.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)