首页 > 代码库 > 利用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实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。