利用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. Atom 编辑器插件：amWiki 轻文库

    amWiki 是一款基于 Javascript 脚本语言.依赖 Atom 编辑器.使用 Markdown 标记语法的轻量级开源 wiki 文库系统. amWiki 致力于让大家可以更简单.更便捷的建设 ...

  2. DoTween使用

    官网:http://dotween.demigiant.com/ 1.step 这里使用lamda表达式,通过dotween的to方法将其移动到 Vector3(348, 196, 0)的值返回到Ve ...

  3. 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  4. Genymotion中文手册(官方用户手册翻译)

    目录 1.概述    2 2.特点    2 2.1最擅长于虚拟Android    2 2.2高可控性    2 2.3管理你的设备    2 2.4从Eclipse中开启虚拟设备    3 3.要 ...

  5. Firefox下载文件时中文名乱码问题

    为了形象化,先看几张不同浏览器下下载文件时的效果图: 1:Firefox 36.0.1 2:IE8 3:Chrome 40.0.2214.93 m 4:360 7.1.1.322 很明显在Firefo ...

  6. EF，ADO.NET Entity Data Model简要的笔记

    1. 新建一个项目,添加一个ADO.NET Entity Data Model的文件,此文件会生成所有的数据对象模型,如果是用vs2012生的话,在.Designer.cs里会出现“// Defaul ...

  7. java中反射

    Person.java===>>person.class ==>>jvm中的类加载器===>>class对象:代表内存中Person.class ==>> ...

  8. 在ASP.NET开始执行HTTP请求的处理程序之前

    using Dscf.Client.Web.Class; using Dscf.Client.Web.DscfService; using Dscf.Client.Web.Handler; using ...

  9. 2.1Android底层开发需要哪些工具

    开发.测试和调试Linux驱动.HAL程序库需要的工具: (1)JDK6或以上版本: (2)Eclipse3.4或以上版本: (3)ADT(用于开发Android应用程序): (4)CDT(用于开发A ...

  10. 一分钟学会（一）：.NET之正则表达式

    本文介绍正则表达式在.NET中的基本应用,代码简单粗暴,实例浅显易懂,让你一分钟快速上手正则(大鸟请略过). 本文为入门文章,很多时候我们只是忘记了语法,这也可作为一个快速查询的参考. 如果想深入学习 ...