<!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. IntelliJ IDEA 创建spring boot 的Hello World 项目

    1.Open IDEA,choose "New-->Project" 2.Choose "Spring Initializr" 3. Choose jav ...

  2. nginx多层反代配置变量proxy_set_header

    Nginx多层反代配置变量proxy_set_header过程记录 第一层代理: (1)路径: $ vim /data/soft/nginx/conf/vhost/xixi.conf (2)内容:(注 ...

  3. QTextStream写文件中文乱码解决办法

    1.首先把Qt Creator的编辑器设置为使用 UTF-8:   工具-->选项-->文本编辑器-->行为,在右侧选项界面找到文件编码选项,设置为 UTF-8.2.使用 QText ...

  4. Java实现代理服务器

    Web代理(proxy)服务器是网络的中间实体. 代理位于Web客户端和Web服务器之间,扮演"中间人"的角色. HTTP的代理服务器即是Web服务器又是Web客户端. 代理服务器 ...

  5. bzoj4009 [HNOI2015]接水果 整体二分+扫描线+树状数组+dfs序

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4009 题解 考虑怎样的情况就会有一个链覆盖另一个链. 设被覆盖的链为 \(a - b\),覆盖 ...

  6. bzoj2325 [ZJOI2011]道馆之战 树链剖分+DP+类线段树最大字段和

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2325 题解 可以参考线段树动态维护最大子段和的做法. 对于线段树上每个节点 \(o\),维护 ...

  7. Feign调用远程服务报错:Caused by: java.lang.IllegalStateException: Method getMemberInfo not annotated with HTTP method type (ex. GET, POST)

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'ord ...

  8. CSS3小笔记

    border-radius:圆角属性:border-radius:左上,右上,右下,左下.transform:rotate(角度):transparent 透明的三角形的写法设置宽和高为0,设置边框的 ...

  9. groovy-2.4.11.jar时出错; invalid LOC header (bad signature)

    Information:java: Errors occurred while compiling module 'security'Information:javac 1.8.0_131 was u ...

  10. android 6.0适配（总结）

    6.0的适配主要是权限: 权限的分组: 普通权限:也就是正常权限,是对手机的一些正常操作,对用户的隐私没有太大影响的权限,比如手机的震动,网络访问,蓝牙等权限,这些权限会在应用被安装的时候默认授予,用 ...