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+Css3实现类似网易云音乐的移动版播放器

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

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

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

[Html5]GhoneGap开发音乐播放器

开发一个Android版的音乐播放器,功能:读取SD卡的音乐,提供刷新音乐库、播放、暂停、停止功能,特别的,还支持通过左右摇手机实现歌曲切换。 代码并非商业代码,只是个人的一个尝试,所以很多地方设计...

用HTML5 Audio API开发游戏音乐

支持的浏览器:难度:中等注意:本文讨论的API尚未最终确定,仍在不断变化。请在自己的项目中谨慎使用。介绍        音频在很大程度上使得多媒体体验非常引人注目。如果你曾经尝试在关闭声音的情况下看电...
  • hfahe
  • hfahe
  • 2012-04-09 23:17
  • 15668

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

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

【html5 audio】音乐播放,灵动的音符效果

html 部分 My Coffee Stream 0.1 html,body,div,img{ margin:0; padding:0; } a,a:hover{ text-de...

使用javascript,HTML5,CSS3打造移动端音乐播放器

使用前端技术打造自己的移动端网页音乐播放器,你想了解的这里都有。

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

Demo Demo链接如下(支持Chrome与Safari,其它浏览器未测试)并非太完善,主体功能已实现,其它功能有时间在加上吧。 http://followyourheart.sinaapp.c...

10 个基于 Web 的 HTML5 音乐播放器

HTML5 是一种用于创建和呈现的网页内容的语言。这是一个革命性的语言,它拥有一些真正棒的功能和一个新的HTML5规范允许本地音频流的播放。本文向你推荐 10 个最棒的 HTML5 音频播放器,看看你...

学习网站整理之3——html5学习之简易音乐播放器制作

为了学点html的东西 ,简单将这个所谓额简单播放器嵌套在我目前整理的网站里,作为随机“主页”的一部分-如上次上次的资料里所写,现在是按照星期的顺序,当打开时,每天都有相应的主页网站,当然之前都是百度...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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