利用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. Ext.Net　破解

    在使用 Ext.Net 框架时,如果没有得到正版授权(安装密钥),在站点发布后,打开界面总是弹出一个窗口,提示没有授权,看着都头疼,难道一定要安装密钥吗?但还是有办法解决的,在研究时发现,页面中多了两 ...

  2. redis错误总结

    1.同步错误.不停重试一直不成功 Full resync from master: e51165e2868c541e28134a287f9bfe36372bae34:80575961684 MASTE ...

  3. IE SEESION共享的问题

    前几天,我们在开发工作流的过程中出现了一个比较奇怪的问题,原本看不到流程的人员,在登陆后却能够看到对应流程的待办任务,并且导致流程流向混乱!在调模式下调试程序发现(假设登陆两个用户)第二个登陆用户的信 ...

  4. 学习总结 JAVA环境配置 及其相应的步骤

    相应的操作步骤 第一步: 右键我的电脑→属性→高级系统设置→环境变量→打开环境变量 第二步:在系统变量中添加JAVA_HOME ,并引用到相对应的地址. 第三步:在系统变量 path 中最前端(按ho ...

  5. js的二元三元操作符

    二元 if ( a == b) { alert(a) } // (a == b) && alert(a) if ( a != b) { alert(a) } // (a == b) | ...

  6. python jinjia2模板使用

    https://gist.github.com/wrunk/1317933 #!/usr/bin/env python # -*- coding: utf-8 -*- from jinja2 impo ...

  7. 查询Sql Server Agent 的job的执行情况。

    //有关SqlJob的信息在database(msdb)内查询.select j.job_id, j.name, j.enabled, jh.run_status, js.last_outcome_m ...

  8. 拿搬东西来解释udp tcpip bio nio aio aio异步

     [群主]雷欧纳德简单理解 tcpip是有通信确认的面对面通信   有打招呼的过程  有建立通道的过程 有保持通道的确认    有具体传输udp是看到对面的人好像在对面等你 就往对面扔东西[群主]雷欧 ...

  9. 1.4Linux内核版本号的定义规则

    Linux内核版本号的组成: (1)主版本号: (2)次版本号: (3)修订版本号: (4)微调版本号: (5)为特定的Linux系统特别调校的描述: 例子:2.6.29.7-flykernel-12 ...

  10. 由后序遍历结果构造二叉查找树 && 二叉查找树链表化

    二叉查找树通俗说就是左孩子比父亲小,右孩子比父亲大.构造这么一个树,树嘛,递归即可. 例如一棵树后序遍历是这样(下图的树):2 9 8 16 15 10 25 38 45 42 30 20.最后的20 ...