音乐导航

<!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. Shell脚本 一键重启

    有个程序必须用 kill -9 pid号   关闭后,才能重新启动,每次都要手动查找pid号,麻烦容易出错,写个shell脚本 就三行很方便,自动查找pid号-关闭程序-重启程序 #!/bin/bas ...

  2. Angular常用命令

    一. Angular常用命令 1. ng new 文件夹名 (新建项目,选择y使用路由) 2. ng serve --open (默认浏览器运行项目) 3. ng serve --port 6060  ...

  3. 【Java编程思想读书笔记】继承中父类的初始化方式

    继承中父类的初始化方式 p144页有感 一.提出问题 假设有一些类,这些类有继承关系的时候,当初始化一个子类对象,对于该类的父类而言,发生了什么呢?是仅仅只是复制了一个引用还是也会同时new一个父类对 ...

  4. ModbusTCP协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析Modbus所含功能码

    现在网上有很多类似的文章.其实这一篇也借鉴了很多其他博主的文章. 写这篇文章的重点是在于解析功能和报文.对Modbus这个协议并不会做很多介绍. 好了,我们开始吧. 常用的功能码其实也没多少.我也就按 ...

  5. linux的分区和文件系统

    一.分区类型 主分区 总共最多能分四个 扩展分区 只能有一个,也算做主分区的一种,也就是说主分区加扩展分区最多有4个. 但是扩展分区不能存储数据和格式化,必须在划分成逻辑分区才能使用. 逻辑分区 逻辑 ...

  6. StarUML之一、UML的相关基本概念

    为什么用UML 项目需要,在项目开发实现前期进行框架技术设计(条条大路通罗马通罗马,画图或者写代码都可以,适合就可以!). 用户的交互我们通常用Axure(原型设计)体现, 框架和功能结构设计则用UM ...

  7. rpm | 升级软件包

    rpm | 升级软件包 检查已安装包 rpm -qa | grep samba samba-common-3.6.9-164.el6.x86_64 samba-3.6.9-164.el6.x86_64 ...

  8. 使用iframe实现导航栏在上面，下面的窗体刷新

    1.做一个导航栏,并设置跳转链接的<a>标签的name属性或id 此处演示name标签 <!-- 导航条 --> <nav id="navAjax" ...

  9. day 17 初始递归

    递归函数 了解什么是递归 : 在函数中调用自身函数 最大递归深度默认是997/998 —— 是python从内存角度出发做的限制 能看懂递归 能知道递归的应用场景 初识递归 —— 算法 —— 二分查找 ...

  10. Eclipse jee最新版国内镜像点下载方式

    Eclipse jee是Eclipse的JavaEE版本,官网服务器在国外,无条件下载的可以使用国内镜像点 清华大学网站镜像网站资料,可用于下载其它版本的Eclipsehttps://mirrors. ...