音乐导航

<!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. [Python]公司接口返回值规范

    返回值规范 json { "code":200, "message":"" "data":[ { "title ...

  2. 使用requests、re、BeautifulSoup、线程池爬取携程酒店信息并保存到Excel中

    import requests import json import re import csv import threadpool import time, random from bs4 impo ...

  3. 对象级别锁 vs 类级别锁（Java）

    前言 对于多线程(并发)和Spring Boot这两块在同步进行学习中,在看到使用synchronized关键字使操作同步时,看到和C#中不一样的东西,所以这里呢,就深入学习了下,若有错误之处,还望指 ...

  4. 第三篇 SpringBoot整合log4j2详解

    源代码:https://pan.baidu.com/s/1d1Lwv1gIvVNltIKVWeEseA 提取码:wff0 SpringBoot整合Log4j2步骤: 1.删除spring-boot-s ...

  5. GNU make doc - 6.6 追加变量值

    有时我们需要对已经定义过的变量进行追加,可以使用+=进行这一操作,就像下面这样 objects += another.o 该语句取objects变量的值,并在其后追加another.o(结果会在原变量 ...

  6. Binder基本使用

    Android开发中,Binder是一种跨进程通信方式,而使用AIDL可以实现Binder的工作. 如何使用它是了解它的第一步,本文章主要记录使用Binder的一些步骤.(代码思路参考<Andr ...

  7. fastJson&edis

    fastJson&redis 1. fastJson 1.1 依赖 <dependency> <groupId>com.alibaba</groupId> ...

  8. List集合去重各种方式汇总

    package com.sb.test; import java.util.*; import java.util.concurrent.ConcurrentHashMap; import java. ...

  9. 【Android】安卓Q适配指南-相册

    碎碎念 本来每次安卓版本升级都是非常期待的事情,但是开发者就吃苦了!!! 尤其是从Q开始,应用采用沙盒模式,即各种公共文件的访问都会受到限制... 所以适配Q成了当务之急,然鹅网上关于适配的资料少之又 ...

  10. Qt代码区字符编码转换

    在做通讯练习的时候,发现发送给小助手字符乱码,图片如下 本人Qt Creator是UTF-8,需要改成gbk,代码如下 #include<QTextCodec> // 提供字符编码转换 Q ...