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

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

  1. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  2. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  3. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  4. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  5. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  6. 用Jquery 仿VS 样式的 导航栏插件

    在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...

  7. CSS练习：仿小米官网

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

  8. （五）Spring Boot官网文档学习

    文章目录 SpringApplication SpringApplication 事件 `ApplicationContext ` 类型 访问传递给 `SpringApplication` 的参数 A ...

  9. Spring Security 官网文档学习

    文章目录 通过`maven`向普通的`WEB`项目中引入`spring security` 配置 `spring security` `configure(HttpSecurity)` 方法 自定义U ...

随机推荐

  1. 关于Flash Builder

    ASDoc路径: X:\Program Files\Adobe\Adobe Flash Builder 4.7 (64 Bit)\eclipse\plugins\com.adobe.flexbuild ...

  2. Eclipse User Library Add/Edit/Remove

    1:前文 近来开发项目采用的技术是AngularJS+Bootstrap+Spring Boot+SpringMvc+JPA 的方式,创建的项目是 Java Project,对应的JAR文件需要添加到 ...

  3. 蛮考验基础的JS笔试题（有坑小心！）

    1.  考察this var length = 10 function fn(){ alert(this.length) } var obj = { length: 5, method: functi ...

  4. SVN与TortoiseSVN实战：文件加锁详解

    硬广:<SVN与TortoiseSVN实战>系列已经写了八篇,本篇是完结篇,整个系列结合TortoiseSVN对SVN中容易被忽视的部分进行了详解,以技巧性为主. 本篇详解使用Tortoi ...

  5. AX 利用windows粘贴板功能实现批量数据快速导出EXCEL

    static void test(Args _args) { int lineNum; int titleLines; SysExcelApplication excel; SysExcelWorkb ...

  6. 安装npm

    npm是nodejs官方未nodejs定制的一个工具,是Node.js的包管理器,是Node Packaged Modules的简称,通过npm可以下载安装nodejs的模块包,nodejs有很多优秀 ...

  7. CopyOnWriteArrayList

    CopyOnWriteArrayList, 内部通过锁+volatile修饰的数组实现的 是一种线程安全的ArrayList,写操作时会copy一个新的内部数组出来替换掉旧 的数组.遍历操作不用加锁了 ...

  8. Unieap3.5-Grid+Form下拉列表高度设置

    Form <div id="SUNIT_ID" name="SUNIT_ID" dojoType="unieap.form.ComboBox&q ...

  9. 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记（七）-- 结构化配置

    本篇将记录.Net Core里颇有特色的结构化配置的使用方法. 相比较之前通过Web.Config或者App.Config配置文件里使用xml节点定义配置内容的方式,.Net Core在配置系统上发生 ...

  10. Data Being Added Conflicts with Existing Data

    While developing a page with multiple scrolls levels, and especially when using a grid, you may get ...