利用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. 队列理论和队列网络模型 queueing theory and queueing network model

    1队列理论 1.1队列在生活中随处可见,例如排队买票,排队打饭,排队做地铁等等.那将诸如此类的队列抽象一下,可归纳为一下5要术: 到达过程arrival process 服务时间的分布 service ...

  2. 一张图看Google MVP设计架构

    这段时间看了一下Google官方推出的MVP架构案例,决定把对MVP的理解用类图的形式表述一下.MVP架构的设计思想确实非常值得学习,大家如果还不是很了解MVP,建议抽时间去研究研究,相信对大家的架构 ...

  3. 使用OpenCV/python进行双目测距

    在做SLAM时,希望用到深度图来辅助生成场景,所以要构建立体视觉,在这里使用OpenCV的Stereo库和python来进行双目立体视觉的图像处理. 立体标定 应用标定数据 转换成深度图 标定 在开始 ...

  4. Selenium2.0介绍

    selenium是一个web的自动化测试工具,和其它的自动化工具相比来说其最主要的特色是跨平台.跨浏览器. 支持windows.linux.MAC,支持ie.ff.safari.opera.chrom ...

  5. js 数组对象，数组的使用

    var a =new Array(1,2,3,4,'a','b','c',{x:1,y:2}); alert(a[7].x); //数组之中可以定义数组. var b=['a','b','c']; c ...

  6. node.js 包教不包会 （Windows版详解）

    针对@alsotang 的新手入门教程 https://github.com/alsotang/node-lessons ,详解该教程在Windows中的实践,包括博主在实践过程中遇到的问题及解决方案 ...

  7. App Naver Line 5.3 add new features - "True Delete"

    Line is getting more and more popular in recent years. Lots of peope use Line, so do "Suspects& ...

  8. iOS 8.3 JB ready

    Hi, I've been waiting for a very very long time..Now iOS 8.3 is ready. http://www.taig.com/ You guys ...

  9. [my]_ubuntu12.10_/etc/apt/sources.list

    deb http://mirrors.163.com/ubuntu/ precise main universe restricted multiverse deb-src http://mirror ...

  10. MVC 项目 在前台使用DataTable

    1:后台控制器代码 //CreateTestOutputDataHeader生成一个测试DataTable public ActionResult UseDataTable() { DataTable ...