利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录） 
作者：王可利（Star·星星）
总结：
今天学习的jQ类库的使用，代码重复的比较多需要完善。严格区分大小写，在 $("").css() 这里css是小写的，用 HBuilder 编写补全是大写的。。这里要注意
主要使用的方法：jQuery 隐藏 / 显示 jQuery 淡出淡入
需要注意的知识点：
效果的样式：
代码如下：（亲们 自己展开拉~）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
7 <style type="text/css">
8 /*.chdBox{
9 position: absolute;
10 width: 976px;
11 height: 65px;
12 background: url(img/nav.png)no-repeat left -65px;
13 }*/
14 span{
15 float: left;
16 margin-top: -113px;
17 margin-left:44% ;
18 width: 168px;
19 height: 90px;
20 background: url(img/logo.png)no-repeat;
21
22 }
23 ul{
24 width: 886px;
25 height: 65px;
26 margin-top: -3px;
27 margin-left: 4px;
28 }
29 .chdBox li{
30 list-style: none;
31 float: left;
32 width: 88px;
33 height: 65px;
34 margin-left: 2px;
35 margin-right: 2px;
36 }
37 li{
38 list-style: none;
39 width: 88px;
40 }
41 .chdBox2{
42 position: absolute;
43 margin-left: 88px;
44 display: block;
45 }
46 .chdBox3{
47 position: absolute;
48 margin-left: 180px;
49 display: block;
50 }
51 .chdBox4{
52 position: absolute;
53 margin-left: 272px;
54 display: block;
55 }
56
57 .chdBox2 li,.chdBox3 li,.chdBox4 li{
58 margin: 2px 0px;
59 text-align: center;
60 padding: 10px 0px;
61 }
62 .chdBox2 a,.chdBox3 a,.chdBox4 a{
63 padding: 10px 10px;
64 text-decoration: none;
65 font: 400 15px/15px "微软雅黑";
66 color: white;
67 background-color: rgba(0,0,0,1);
68 }
69 .starbox{
70 position: relative;
71 margin-left:50px;
72 top: 90px;
73 width: 880px;
74 height: 280px;
75 background-color: gray;
76 display: none;
77 }
78 p{
79 position: absolute;
80 top: 0px;
81 }
82 </style>
83 </head>
84 <body>
85 <div class="chdBox" id="chdBoxID">
86 <ul>
87 <li id="nav1"><a href="#"></a></li>
88 <li id="nav2"><a href="#"></a></li>
89 <li id="nav3"><a href="#"></a></li>
90 <li id="nav4"><a href="#"></a></li>
91 </ul>
92 <span class="pic"></span>
93 </div>
94 <div class="starbox">
95 <div class="chdBox2" id="chdBoxID2" >
96 <li><a href="" class="star1" style="display: none;">最新热点</a></li>
97 <li><a href="" class="star2" style="display: none;">新闻中心</a></li>
98 <li><a href="" class="star3" style="display: none;">活动新闻</a></li>
99 <li><a href="" class="star4" style="display: none;">商城咨询</a></li>
100 <li><a href="" class="star5" style="display: none;">盛大新闻</a></li>
101 </div>
102 <div class="chdBox3" id="chdBoxID3" >
103 <li><a href="" class="star1" style="display: none;">统一商城</a></li>
104 <li><a href="" class="star2" style="display: none;">服饰搭配</a></li>
105 </div>
106 <div class="chdBox4" id="chdBoxID4" >
107 <li><a href="" class="star1" style="display: none;">基本介绍</a></li>
108 <li><a href="" class="star2" style="display: none;">新手学堂</a></li>
109 <li><a href="" class="star3" style="display: none;">职业介绍</a></li>
110 <li><a href="" class="star4" style="display: none;">升级指南</a></li>
111 <li><a href="" class="star5" style="display: none;">高手进阶</a></li>
112 <li><a href="" class="star6" style="display: none;">特色系统</a></li>
113 </div>
114 </div>
115
116
117 <script >
118 $(document).ready(function(){
119 $("#chdBoxID").css({
120 "position": "absolute",
121 "width": "976px",
122 "height": "65px",
123 "background" : "url(img/nav.png) no-repeat left -65px",
124 "top":"40px"
125 });
126
127 $("#nav2").mouseover(function(){
128 $("#chdBoxID2 .star1").fadeToggle(1000);
129 $("#chdBoxID2 .star2").fadeToggle(1300);
130 $("#chdBoxID2 .star3").fadeToggle(1500);
131 $("#chdBoxID2 .star4").fadeToggle(1700);
132 $("#chdBoxID2 .star5").fadeToggle(1900);
133 $(".starbox").fadeToggle("fast");
134 $("p").toggle("fast");
135 })
136 $("#nav2").mouseout(function(){
137 $("#chdBoxID2 .star1").fadeToggle("fast");
138 $("#chdBoxID2 .star2").fadeToggle("fast");
139 $("#chdBoxID2 .star3").fadeToggle("fast");
140 $("#chdBoxID2 .star4").fadeToggle("fast");
141 $("#chdBoxID2 .star5").fadeToggle("fast");
142 $(".starbox").fadeToggle("fast");
143 $("p").toggle("fast");
144 })
145
146 $("#nav3").mouseover(function(){
147 $("#chdBoxID3 .star1").fadeToggle(1000);
148 $("#chdBoxID3 .star2").fadeToggle(1300);
149 $(".starbox").fadeToggle("fast");
150 $("p").toggle("fast");
151 })
152 $("#nav3").mouseout(function(){
153 $("#chdBoxID3 .star1").fadeToggle("fast");
154 $("#chdBoxID3 .star2").fadeToggle("fast");
155 $(".starbox").fadeToggle("fast");
156 $("p").toggle("fast");
157 })
158 $("#nav4").mouseover(function(){
159 $("#chdBoxID4 .star1").fadeToggle(1000);
160 $("#chdBoxID4 .star2").fadeToggle(1300);
161 $("#chdBoxID4 .star3").fadeToggle(1500);
162 $("#chdBoxID4 .star4").fadeToggle(1700);
163 $("#chdBoxID4 .star5").fadeToggle(1900);
164 $("#chdBoxID4 .star6").fadeToggle(2100);
165 $(".starbox").fadeToggle("fast");
166 $("p").toggle("fast");
167 })
168 $("#nav4").mouseout(function(){
169 $("#chdBoxID4 .star1").fadeToggle("fast");
170 $("#chdBoxID4 .star2").fadeToggle("fast");
171 $("#chdBoxID4 .star3").fadeToggle("fast");
172 $("#chdBoxID4 .star4").fadeToggle("fast");
173 $("#chdBoxID4 .star5").fadeToggle("fast");
174 $("#chdBoxID4 .star6").fadeToggle("fast");
175 $(".starbox").fadeToggle("fast");
176 $("p").toggle("fast");
177 })
178 });
179 </script>
180
181 <p style="font: 500 18px/18px ‘微软雅黑‘;color: red;">彩虹岛官方网站，只做到了左边的4个 导航</p>
182 </body>
183 </html>
代码 导入了JQ 和 两个图片
时间： 2024-08-01 22:43:54