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自动播放背景音乐

html javascript var bgmusic = document.getElementById('bgmusic'); bgmusic.addEventListener('canpl...
  • yhb241
  • yhb241
  • 2015年06月25日 15:13
  • 3077

利用HTML5的本地存储制作的个性化导航页

本人做了一个HTML5页面,用于管理自己经常访问的网站。 数据使用HTML5的localStorage存储。下面是完整的页面代码。 a{margin:15px;font-size:28px;}...
  • tiana0
  • tiana0
  • 2016年10月18日 12:42
  • 825

用HTML5 Audio API开发游戏音乐

音频在很大程度上使得多媒体体验非常引人注目。如果你曾经尝试在关闭声音的情况下看电影,你就很可能已经注意到了这一点。   游戏也不例外!我最喜爱的视频游戏的回忆里包含了音乐和声效。在二十年后的今天,大...
  • u013891299
  • u013891299
  • 2014年03月06日 15:20
  • 433

HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)

这个是一个典型的三段式部局,上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。1,效果图如下: 2,页面元素说明: (1)在最外层我们添加了一个wrapper,把所...
  • u014063717
  • u014063717
  • 2016年03月17日 14:04
  • 5852

html5实现地图上定位导航路线

转自:http://zhidao.baidu.com/link?url=u_HYWgKERQvi6luDE3jdKcJM3ybb8bWkedrXne4ckR99b6riJ0mmKEAkwJ3a9Q8o...
  • chelen_jak
  • chelen_jak
  • 2015年05月06日 08:50
  • 6530

修改 android的 开机 音乐

接 修改动画 的 教程, 接下来我们给系统添加开机声音   由于动画是在BootAnimation播放的,所以我们的声音肯定也在这个类中做,照猫画虎   首先在BootAnimation.h添加方...
  • wh_19910525
  • wh_19910525
  • 2012年04月16日 17:11
  • 2609

车载导航不支持播放全部的mp3音乐的解决办法--------fwqlzz love is for ever

提车装载4s店导航卡仕达帮手支持cdminiSD卡也有u盘接口但最发现有些歌曲支持播放同样mp3格式后来网友有说因为比特率于128kBmp3部分导航支持可能需要去升级导航固件如果无法升级导航固件可以修...
  • fwqlzz
  • fwqlzz
  • 2017年03月16日 15:43
  • 695

HTML5页面调用百度地图API,获取当前位置并导航到目的地

微信也可用, HTML5页面调用百度地图API,获取当前位置并导航到目的地 body, html,#allmap {w...
  • lp1052843207
  • lp1052843207
  • 2017年06月12日 10:00
  • 4278

HTML5动画-翻转音乐盒效果动画

HTML5动画-翻转音乐盒效果动画
  • xyphf
  • xyphf
  • 2017年07月06日 10:03
  • 294

HTML5背景音乐的暂停与播放

HTML代码:                                                                    JS代码:  //...
  • niunan
  • niunan
  • 2016年03月22日 13:29
  • 1927
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5音乐导航
举报原因:
原因补充:

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