利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录） 作者：王可利（Star·星星）
总结：
今天学习的jQ类库的使用，代码重复的比较多需要完善。严格区分大小写，在 $("").css() 这里css是小写的，用 HBuilder 编写补全是大写的。。这里要注意
主要使用的方法：jQuery 隐藏 / 显示 jQuery 淡出淡入
需要注意的知识点：
效果的样式：
代码如下：（亲们 自己展开拉~）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style type="text/css">
/*.chdBox{
position: absolute;
width: 976px;
height: 65px;
background: url(img/nav.png)no-repeat left -65px;
}*/
span{
float: left;
margin-top: -113px;
margin-left:44% ;
width: 168px;
height: 90px;
background: url(img/logo.png)no-repeat; }
ul{
width: 886px;
height: 65px;
margin-top: -3px;
margin-left: 4px;
}
.chdBox li{
list-style: none;
float: left;
width: 88px;
height: 65px;
margin-left: 2px;
margin-right: 2px;
}
li{
list-style: none;
width: 88px;
}
.chdBox2{
position: absolute;
margin-left: 88px;
display: block;
}
.chdBox3{
position: absolute;
margin-left: 180px;
display: block;
}
.chdBox4{
position: absolute;
margin-left: 272px;
display: block;
} .chdBox2 li,.chdBox3 li,.chdBox4 li{
margin: 2px 0px;
text-align: center;
padding: 10px 0px;
}
.chdBox2 a,.chdBox3 a,.chdBox4 a{
padding: 10px 10px;
text-decoration: none;
font: 400 15px/15px "微软雅黑";
color: white;
background-color: rgba(0,0,0,1);
}
.starbox{
position: relative;
margin-left:50px;
top: 90px;
width: 880px;
height: 280px;
background-color: gray;
display: none;
}
p{
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<div class="chdBox" id="chdBoxID">
<ul>
<li id="nav1"><a href="#"></a></li>
<li id="nav2"><a href="#"></a></li>
<li id="nav3"><a href="#"></a></li>
<li id="nav4"><a href="#"></a></li>
</ul>
<span class="pic"></span>
</div>
<div class="starbox">
<div class="chdBox2" id="chdBoxID2" >
<li><a href="" class="star1" style="display: none;">最新热点</a></li>
<li><a href="" class="star2" style="display: none;">新闻中心</a></li>
<li><a href="" class="star3" style="display: none;">活动新闻</a></li>
<li><a href="" class="star4" style="display: none;">商城咨询</a></li>
<li><a href="" class="star5" style="display: none;">盛大新闻</a></li>
</div>
<div class="chdBox3" id="chdBoxID3" >
<li><a href="" class="star1" style="display: none;">统一商城</a></li>
<li><a href="" class="star2" style="display: none;">服饰搭配</a></li>
</div>
<div class="chdBox4" id="chdBoxID4" >
<li><a href="" class="star1" style="display: none;">基本介绍</a></li>
<li><a href="" class="star2" style="display: none;">新手学堂</a></li>
<li><a href="" class="star3" style="display: none;">职业介绍</a></li>
<li><a href="" class="star4" style="display: none;">升级指南</a></li>
<li><a href="" class="star5" style="display: none;">高手进阶</a></li>
<li><a href="" class="star6" style="display: none;">特色系统</a></li>
</div>
</div> <script >
$(document).ready(function(){
$("#chdBoxID").css({
"position": "absolute",
"width": "976px",
"height": "65px",
"background" : "url(img/nav.png) no-repeat left -65px",
"top":"40px"
}); $("#nav2").mouseover(function(){
$("#chdBoxID2 .star1").fadeToggle(1000);
$("#chdBoxID2 .star2").fadeToggle(1300);
$("#chdBoxID2 .star3").fadeToggle(1500);
$("#chdBoxID2 .star4").fadeToggle(1700);
$("#chdBoxID2 .star5").fadeToggle(1900);
$(".starbox").fadeToggle("fast");
$("p").toggle("fast");
})
$("#nav2").mouseout(function(){
$("#chdBoxID2 .star1").fadeToggle("fast");
$("#chdBoxID2 .star2").fadeToggle("fast");
$("#chdBoxID2 .star3").fadeToggle("fast");
$("#chdBoxID2 .star4").fadeToggle("fast");
$("#chdBoxID2 .star5").fadeToggle("fast");
$(".starbox").fadeToggle("fast");
$("p").toggle("fast");
}) $("#nav3").mouseover(function(){
$("#chdBoxID3 .star1").fadeToggle(1000);
$("#chdBoxID3 .star2").fadeToggle(1300);
$(".starbox").fadeToggle("fast");
$("p").toggle("fast");
})
$("#nav3").mouseout(function(){
$("#chdBoxID3 .star1").fadeToggle("fast");
$("#chdBoxID3 .star2").fadeToggle("fast");
$(".starbox").fadeToggle("fast");
$("p").toggle("fast");
})
$("#nav4").mouseover(function(){
$("#chdBoxID4 .star1").fadeToggle(1000);
$("#chdBoxID4 .star2").fadeToggle(1300);
$("#chdBoxID4 .star3").fadeToggle(1500);
$("#chdBoxID4 .star4").fadeToggle(1700);
$("#chdBoxID4 .star5").fadeToggle(1900);
$("#chdBoxID4 .star6").fadeToggle(2100);
$(".starbox").fadeToggle("fast");
$("p").toggle("fast");
})
$("#nav4").mouseout(function(){
$("#chdBoxID4 .star1").fadeToggle("fast");
$("#chdBoxID4 .star2").fadeToggle("fast");
$("#chdBoxID4 .star3").fadeToggle("fast");
$("#chdBoxID4 .star4").fadeToggle("fast");
$("#chdBoxID4 .star5").fadeToggle("fast");
$("#chdBoxID4 .star6").fadeToggle("fast");
$(".starbox").fadeToggle("fast");
$("p").toggle("fast");
})
});
</script> <p style="font: 500 18px/18px '微软雅黑';color: red;">彩虹岛官方网站，只做到了左边的4个 导航</p>
</body>
</html>
代码 导入了JQ 和 两个图片
