首页 > 代码库 > 利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)

利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)

利用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 和 两个图片

 

利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)