454day（音乐导航）

最新推荐文章于 2023-07-19 20:30:51 发布

orangecloudy

最新推荐文章于 2023-07-19 20:30:51 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/85501108

本文介绍了一个结合音乐播放功能的导航菜单实现方式，通过鼠标悬停动画和对应的音乐播放，为用户提供独特的交互体验。使用了jQuery进行动画控制和音乐加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《2019年1月1日》【连续454天】

标题：音乐导航；

内容：

//stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false

<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>
 <script src="js/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();
        setTimeout(function() {
           $("audio").get(idx).play();
        }, 0);
       
      }).mouseleave(function () {
        $(this).children("span").stop().animate({top:60});
      });
   });
  </script>
</body>