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

清疚 2023-08-17 16:17 63阅读 0赞

利用JQ实现的，高仿 彩虹岛官网导航栏**（学习HTML过程中的小记录）   ![1045520-20161028121136703-1594984301.gif][]作者：王可利（Star·星星）**

总结：

####             今天学习的jQ类库的使用，代码重复的比较多需要完善。严格区分大小写，在 $("").css()   这里css是小写的，用 HBuilder 编写补全是大写的。。这里要注意 ####

**主要使用的方法：jQuery 隐藏 / 显示    jQuery***** 淡出淡入***

需要注意的知识点：

![1045520-20161101231855111-1184960420.png][]

![1045520-20161101231911846-708545534.png][]

**效果的样式：![1045520-20161028121136703-1594984301.gif][]**

**![1045520-20161101230950955-1459689036.png][]**

**代码如下：![1045520-20161028121136703-1594984301.gif][]（亲们 自己展开拉~）**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

转载于:https://www.cnblogs.com/StarKL/p/6021427.html

[1045520-20161028121136703-1594984301.gif]: /images/20230810/e87516104384437c85371523fe7e2763.png
[1045520-20161101231855111-1184960420.png]: /images/20230810/a4e6f0fa6866439981f803cf8b715495.png
[1045520-20161101231911846-708545534.png]: /images/20230810/2d30825579b343d68e3ef8a83922c118.png
[1045520-20161101230950955-1459689036.png]: /images/20230810/bab7586458844894b3acfa1e3085e758.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230810/c06af86879f04f00a3bdd8e4d277d12f.png