HTML5音乐导航

来源：互联网发布：虎扑认证的淘宝aj鞋店编辑：程序博客网时间：2024/06/05 01:19
<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