HTML5音乐导航

原创 2015年11月18日 22:07:05
<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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5浮动-制作QQ会员页面导航

  • 2017年08月29日 22:04
  • 14KB
  • 下载

7款高颜值HTML5播放器:让你的音乐有声有色

原文:http://www.codeceo.com/article/7-cool-html5-player.html 这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有...

基于HTML5与CSS3的左侧菜单导航

  • 2015年08月26日 17:27
  • 238KB
  • 下载

Html5+Css3实现类似网易云音乐的移动版播放器

网易云音乐的网页版是没有移动页面的,我突发奇想,来做一个玩玩: http://followyourheart.sinaapp.com/Demos/musicPlayer/Index.html 主要用到...

用HTML5实现简易的音乐播放器

该文章是使用html5结合Jquery制作了一个简易的音乐播放器,在该播放器中实现了音乐的顺序播放,下一首,上一首和暂停等功能。...

简洁的html5+css3导航菜单插件

  • 2015年05月20日 02:57
  • 283KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5音乐导航
举报原因:
原因补充:

(最多只允许输入30个字)