音乐导航

<!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: rgb(231, 234, 237);

      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: rgb(60, 64, 67);

      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>

有个报错....

jQuery---音乐导航的更多相关文章

  1. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  2. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  3. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  4. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  5. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  7. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  8. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  9. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  10. jQuery去掉导航分割线的最后一条竖线

    #top #navigation ul li { float:left; width:120px; background:url(../images/navline.jpg) no-repeat 11 ...

随机推荐

  1. ISO14229系列之二：诊断指令格式和相关概念

    作者:autogeek 原文链接:http://www.cnblogs.com/autogeek/p/4458658.html 1. 简单的通信机制 其实诊断通信的机制很简单,可以类比client-s ...

  2. RJM8L151F6P6温度枪方案对比

    疫情当下,温度计.呼吸机.监护仪.制氧机等医疗产品的生产供应至关重要,红外温度计属于非接触式测温,它是利用物体热辐射与物体温度之间的关系来工作的. 红外测温仪是一种将红外技术与微电子技术相结合的新型温 ...

  3. C++中的多态及虚函数大总结

    多态是C++中很关键的一部分,在面向对象程序设计中的作用尤为突出,其含义是具有多种形式或形态的情形,简单来说,多态:向不同对象发送同一个消息,不同的对象在接收时会产生不同的行为.即用一个函数名可以调用 ...

  4. 【查阅】Chrome快捷键

    高频简要Chrome快捷键整理 记录一下Chrome常用快捷键方便查询熟悉,提高工作效率. 在我认为比较高频有用的快捷键,会加粗和标记. 在日常中熟练使用快捷键能帮助我们提高工作效率. 一 .F区单键 ...

  5. python+selenium自动化测试，浏览器最大化报错解决方法

    此处以谷歌浏览器为例 [问题1]缺少chrome驱动,webdriver调用谷歌浏览器的时候就报错了,如下图: [原因分析]缺少谷歌驱动程序 [解决办法] 1.查看本地安装chrome浏览器版本 2. ...

  6. Oracle11以后的行列转换

    Oracle11以后,行列转换有了新的方法. 下面的是已经疏通过的代码,请放心使用... With AA as ( Select A,B,C,row_number() over (partition ...

  7. k8s CNI插件简单了解

    Kubernetes网络模型本身对某些特定的网络功能有一定要求,但在实现方面也具有一定的灵活性.业界已经有不少不同的网络方案,来满足特定的环境和要求. CNI(container network in ...

  8. Leetcode：235. 二叉搜索树的最近公共祖先

    Leetcode:235. 二叉搜索树的最近公共祖先 Leetcode:235. 二叉搜索树的最近公共祖先 Talk is cheap . Show me the code . /** * Defin ...

  9. Android Studio 快捷方式记录

  10. python实现串口通讯小程序(GUI界面)

    python实现串口通讯小程序(GUI界面) 使用python实现串口通讯需要使用python的pyserial库来实现,这个库在安装python的时候没有自动进行安装,需要自己进行安装. 1.安装p ...