颜枫

在布满荆棘的道路上继续奔跑吧

HTML5音乐导航

<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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lkk1344/article/details/49913803
上一篇HTML5新增标签1
下一篇html5拖放
想对作者说点什么? 我来说一句

HTML5制作的精美前端音乐页面

2016年11月12日 42.08MB 下载

没有更多推荐了,返回首页

关闭
关闭