<!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. python学习第四十八天json模块与pickle模块差异

    在开发过程中,字符串和python数据类型进行转换,下面比较python学习第四十八天json模块与pickle模块差异. json 的优点和缺点 优点  跨语言,体积小 缺点 只能支持 int st ...

  2. 微信小程序之全局储存

    全局变量app.globalData 本地缓存wx.setStorageSync(KEY,DATA)wx.getStorageSync(KEY)wx.getStorageInfoSyncwx.remo ...

  3. 【记录】git error:bad signature 解决方法

    今天提交git 的时候出现 bad signature 错误,意思是git下的index文件损坏了,需要重新生成下 error: bad signature fatal: index file cor ...

  4. Linux性能优化从入门到实战：12 内存篇：Swap 基础

    内存资源紧张时,可能导致的结果 (1)OOM 杀死大内存CPU利用率又低的进程(系统内存耗尽的情况下才生效:OOM 触发的时机是基于虚拟内存,即进程在申请内存时,如果申请的虚拟内存加上服务器实际已用的 ...

  5. python常用函数 W

    with…as with 语句适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的“清理”操作,释放资源,比如文件使用后自动关闭.线程中锁的自动获取和释放等.当python执行wi ...

  6. Ansible笔记（7）---常用模块之系统类模块（cron、service）

    一.cron模块 1.1作用: cron 模块可以帮助我们管理远程主机中的计划任务,功能相当于 crontab 命令. 在了解cron模块的参数之前,先写出一些计划任务的示例: # 示例1,每天的1点 ...

  7. .OnCommand mfc

    .OnCommand是响应WM_COMMAND消息的,一般是响应控件和菜单的命令消息时使用. 如果 WM_COMMAND 来自控件的话 lParam 就是发送这个 WM_COMMAND 消息的控件的句 ...

  8. 前端每日实战：30# 视频演示如何用纯 CSS 创作一个晃动的公告板

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wjZoGV 可交互视频教程 此视频 ...

  9. Java中Comparable接口和Comparator接口的简单用法

    对象比较器 1.Comparable接口 此接口强行对实现它的每个类的对象进行整体排序,这种排序成为类的自然排序,类的compareTo方法称为类的自然比较方法. 代码示例 import java.u ...

  10. 详解zabbix中文版安装部署

    一.zabbix简介(摘自百度百科) zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供柔软 ...