利用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. 【LeetCode】15. 3Sum 三个数和为0

    题目: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find al ...

  2. MVC+EF更新数据库

    要使用代码先行提供的迁移功能来保证模型和数据库自动匹配,在库程序包管理器里依次执行以下命令:1.启用迁移功能:Enable-Migrations -ContextTypeName MvcMovie.M ...

  3. 学习记录 java session保存用户登录

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. eclipse中logcat偶尔不显示log的问题解决办法

    Android开发过程中  eclipse 经常会出现 logcat突然就是不现实log的情况.经常遇到,一直没有解决.后来解决了,记录一下. 默认的设置是error 改成verbos 问题解决.

  5. 【Nginx 3】FTP远程文件下载

    导读:在做项目的过程中,当用户发起申诉时,要上传一个申诉材料.然后后台运营人员在处理申诉时,可能会需要下载申诉材料,进行参考.本篇博客呢,就介绍一下文件的下载! 一.代码实现 <span sty ...

  6. WWF3动态修改工作流<第九篇>

    一.动态添加或移除工作流活动 首先添加一个顺序的空白工作流. 然后添加一个Winform程序,界面如下: 代码如下: namespace WinForm { public partial class ...

  7. Java中可变长参数的使用及注意事项

    在Java5 中提供了变长参数(varargs),也就是在方法定义中可以使用个数不确定的参数,对于同一方法可以使用不同个数的参数调用,例如print("hello");print( ...

  8. （笔记）安装npm需要更改代理kneesocks 1081 1080

  9. UML类图与类的关系详解

    摘自:http://www.uml.org.cn/oobject/201104212.asp UML类图与类的关系详解 2011-04-21 来源:网络 在画类图的时候,理清类和类之间的关系是重点.类 ...

  10. Python-2.7.11+Django-1.9.4安装配置

    1.去python官网下载2.7的最新版本 https://www.python.org/downloads 1.1 解压Python-2.7.11.tgz tar xvf Python-2.7.11 ...