音乐导航

<!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. C++常见编程--获取当前系统时间

    C++常见编程--获取当前系统时间 文章首发https://www.cppentry.com 本文主要使用time() 及strftime() 函数 C++系统和时间相关的函数基本上都是使用C语言提供 ...

  2. kali中安装中文输入法ibus

    1.控制台输入命令: apt-get install ibus-pinyin 出现选择都选yes 2.安装完毕后输入命令,重启虚拟机: reboot 3.打开  输入法,如图中2处input meth ...

  3. cir from c# 托管堆和垃圾回收

    1,托管堆基础 调用IL的newobj 为资源分配内存 初始化内存,设置其初始状态并使资源可用.类型的实列构造器负责设置初始化状态 访问类型的成员来使用资源 摧毁状态进行清理 释放内存//垃圾回收期负 ...

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

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

  5. 聊聊spring之bean对象的实例化过程

    在spring实例化 之前bean对象封装成 beanDefinition 对象 想了解详情的请参考上一篇文章 好了 我们聊聊 Bean 的实例化过程的几个重要角色 BeanDefinitionReg ...

  6. ORACLE中如何找出大表分布在哪些数据文件中？

    ORACLE中如何找出大表分布在哪些数据文件中?   在ORACLE数据中,我们能否找出一个大表的段对象分布在哪些数据文件中呢? 答案是可以,我们可以用下面脚本来找出对应表的区.段分别位于哪些数据文件 ...

  7. MFC/QT 学习笔记（二）——MFC入门

    MFC以C++形式封装了Windows API //实践 编写MFC需要的头文件#include <afxwin.h> 程序执行流程: 实例化应用程序对象(有且只有一个) 执行程序入口函数 ...

  8. nuget打包上传

    准备工作 下载nuget.exe,以及gui推送编辑工具 Nuget Package Explorer (可选) 设置nuget环境变量. 流程 完成项目 cmd控制台cd到项目目录下(项目目录不是解 ...

  9. .net core 中api 模型验证

    AddControllers/AddMvc方法允许添加自定义ActionFilterAttribute进行过滤 文档中这么定义Filter: 可以创建自定义筛选器,用于处理横切关注点. 横切关注点的示 ...

  10. 【seata源码学习】001 - seata-server的配置读取和服务注册

    github, seata vergilyn seata-fork seata.io zh-cn docs (PS. 随缘看心情写,坚持不了几天.文章还是写的超级的烂,排版也奇差无比~~~~ 脑壳疼~ ...