jquery(2)
2016-08-28 本文已影响6人
OldSix1987
360音乐导航条
Paste_Image.png
思路
1.首先，创建一个
ul，里面含有9个li，将所有的li左浮动，加上下左右的border，注意最右边的一个是#nav li:last-child搞定
2.其次，添加点击效果，用到jQuery的click函数，在点击时，先去除所有的含有点击样式的，然后再将该点击样式赋值给当前li
3.再次，利用jQuery的append方法，为每个li添加色块span，先将其block化，并赋予不同的颜色加以区分
4.再再次，利用jQuery的hover方法，为li添加hover移入和移开的动画animate效果，移入：色块上移，移开：色块恢复
5.最后，为导航栏添加音乐特效，先加入audio资源，最后在hover方法中，根据当前li的index，选择播放每个audio即可。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#nav {
list-style-type: none;
width: 960px;
height: 38px;
margin: auto;
color: #333;
font-size: 14px;
padding: 0px;
overflow: hidden;
}
#nav li {
width: 105px;
float: left;
height: 36px;
text-align: center;
line-height: 38px;
border-top: #c9cbce solid 1px;
border-left: #c9cbce solid 1px;
border-bottom: #c9cbce solid 1px;
cursor: pointer;
}
#nav li:last-child {
border-right: #c9cbce solid 1px;
}
#nav .liclick{
border-top: #7BB347 solid 2px;
border-bottom: none;
}
#nav span{
width: 100%;
height: 38px;
display: block;
position: relative;
z-index: -1;
}
</style>
<script src="js/jquery.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>');// 添加一个span标签
$('#nav span').each(function(index, el) {
$(this).css('background-color', color[index]);
});
$('#nav li').hover(function() {
/* Stuff to do when the mouse enters the element */
$(this).children('span').animate({'top': -38}, 200);
// 获得当前li的索引编号
var index = $(this).index();
$('audio').get(index).play(); // 播放第index个音乐
}, function() {
/* Stuff to do when the mouse leaves the element */
$(this).children('span').animate({'top': 0}, 200);
});
});
</script>
</head>
<body style="padding:50px;background-color:#fff">
<!-- <div class="container" style="padding:30px;background-color:#fff;"> -->
<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="src/360music/1 C.mp3"></audio>
<audio src="src/360music/2 D.mp3"></audio>
<audio src="src/360music/3 E.mp3"></audio>
<audio src="src/360music/4 F.mp3"></audio>
<audio src="src/360music/5 G.mp3"></audio>
<audio src="src/360music/6 A.mp3"></audio>
<audio src="src/360music/7 B.mp3"></audio>
<audio src="src/360music/1 C.mp3"></audio>
<audio src="src/360music/2 D.mp3"></audio>
<!-- </div> -->
</body>
</html>
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<!-- <script src="bootstrap/js/jquery.min.js"></script> -->
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> -->
