<!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: black;
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: blue;
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基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  2. Jquery基础之动画操作

    Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...

  3. Jquery基础之事件操作

    事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...

  4. 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

    这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...

  5. 【jQuery基础学习】02 jQuery的DOM操作

    DOM操作分为3个方面: DOM Core    任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作 HTML-DOM  只能用来处理web文档 ...

  6. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  7. 第一章jQuery基础

    一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype之后又一个优秀的java ...

  8. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  9. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

随机推荐

  1. .net core jessetalk资料合集

    资料推荐集合贴 By Jesse • 2018-01-10 • 5064次浏览 流程图在线预览地址:https://9o90oe.axshare.com/#g=1&p=home OAuth2  ...

  2. 帝国CMS 列表内容模板[!--empirenews.listtemp--]改写为灵动标签[e:loop={}]

    需求描述: 1.将专题列表下的列表单元,自动根据专题页标题或者页面关键词来匹配展示: 2.第一个精确匹配,后面十一个模糊匹配,总数12个: 正文模板中,引入部分为: [!--empirenews.li ...

  3. C语言如何使输出的数字对齐

    右对齐%numd(num是位数,比如按5位数的长度输出,num为正数则右对齐) #include <stdio.h> int main() { printf(, ); printf(, ) ...

  4. 使用myBase Desktop来管理电脑上的资料

    下载链接:下载链接:http://www.wjjsoft.com/download.html 选择自己的操作系统下的myBase Desktop 这里是下载的是安装包,有解压的版本的. 这里就简单介绍 ...

  5. Git分支操作步骤

    学习操作Git分支,具体如下: - 查看分支 - 创建分支 - 切换分支 - 合并分支 - 解决分支的冲突 方案: Git支持按功能模块,时间,版本等标准创建分支; 分支可以让开发分多条主线同时进行, ...

  6. linux7 grub配置文件 linux6 grub配置文件

    在 grub 的 kernel 配置后面,添加 acpi_pad.disable=1 重启机器之后,开机就不会自动加载 acpi_pad 模块 一:linux6 [root@node2 ~]# cat ...

  7. poj 2689 Prime Distance(区间筛选素数)

    Prime Distance Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9944   Accepted: 2677 De ...

  8. 随笔1 interface Map<K,V>

    第一次写笔记就从map开始吧,如上图所示,绿色的是interface,黄色的是abstract class,蓝色的是class,可以看出所有和图相关的接口,抽象类和类的起源都是interface ma ...

  9. 2018-11-01-weekly

    Algorithm 107. 二叉树的层次遍历 II What 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历).例如:给定二叉树 [3,9 ...

  10. 2018-10-10-weekly

    Algorithm 字典序排数 What 给定一个整数n,返回从1到n的字典顺序,例如,给定 n =13,返回 [1,10,11,12,13,2,3,4,5,6,7,8,9] ,尽可能的优化算法的时间 ...