关闭

HTML5音乐导航

标签: 导航音乐html5
175人阅读 评论(0) 收藏 举报
分类:
<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐导航</title>
</head>
<style type="text/css">
#nav{
list-style-type:none;
/*去掉无序列表前面的点*/
margin:50px auto 0px;
/*上边界50px,左右居中,下边界为0*/
width:960px;
height:38px;
color:#333;
font-size:14px;
padding:0px;  
overflow:hidden;

}
#nav li{
width:105px;
height:36px;
float:left;  /*所有的li从左到右排列*/
text-align:center;
/*文字居中对齐*/
line-height:38px;
/*设置行高,目的是让文字垂直居中*/
border-top:#C9CBCE solid 1px;
border-left:#C9CBCE solid 1px;
border-bottom:#C9CBCE solid 1px;
cursor:pointer;
/*光标移动到li上变成手形*/
}
#nav li:last-child{ /*#nav下的最后一个li*/
border-right:#C9CBCE solid 1px; 
}
#nav .liclick{
border-top:#0C3 solid 2px;
border-bottom:none;}
#nav span{
width:100%;
height:38px;
display:block;
position:relative;
z-index:-1;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    //点击li
$('#nav li').click(function(e) {
        $('.liclick').removeClass('liclick');
$(this).addClass('liclick');
    });
//每个li下面添加一个底色
var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];
$('#nav li').append('<span>');
$('#nav span').each(function(index, element) {
        $(this).css('background-color',color[index]);
    });
//移动到li上的时候颜色色块升起
$('#nav li').hover(function(){
$(this).children('span').animate({'top':-38},200);
//获得当前li的索引编号
var index=$(this).index();
$('audio').get(index).play();
//播放第index个音乐
},function(){
$(this).children('span').animate({'top':0},200);
});
});


</script>
<body>
<ul id="nav">
<li class="liclick">个人主页</li>
<li>我的相册</li>
<li>发表博客</li>
<li>最新影片</li>
<li>收藏音乐</li>
<li>旅游度假</li>
<li>天天特价</li>
<li>云端生活</li>
<li>今日头条</li>
</ul>
<audio src="navmusic/m1.mp3"></audio>
<audio src="navmusic/m2.mp3"></audio>
<audio src="navmusic/m3.mp3"></audio>
<audio src="navmusic/m4.mp3"></audio>
<audio src="navmusic/m5.mp3"></audio>
<audio src="navmusic/m6.mp3"></audio>
<audio src="navmusic/m7.mp3"></audio>
<audio src="navmusic/m8.mp3"></audio>
<audio src="navmusic/m9.mp3"></audio>
</body>
</html>
<span style="color:#ff0000;">该案例使用了JQuery,需要你们下载jquery包,这里面的音乐需要你们自行找几个。
该案例可直接运行。</span></span>

0
0
猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14624次
    • 积分:781
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:1篇
    • 译文:0篇
    • 评论:4条
    文章存档
    最新评论