利用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. 【练习】手工生成awr报告

    ①首先进入$ORACLE_HOME/rdbms/admin目录 [oracle@host02 ~]$ cd $ORACLE_HOME/rdbms/admin 该目录下 [oracle@host02 a ...

  2. Android基础总结(5)——数据存储,持久化技术

    瞬时数据:指那些存储在内存当中,有可能会因为程序广播或其他原因导致内存被回收而丢失的数据. 数据持久化:指将那些内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑关机的情况下,这些数据仍然不丢失. ...

  3. mac 下安装nginx

    1,mac下的依赖: pcre-8.38.tar.gz nginx-1.4.7.tar.gz 2,解压pcre:进入器解压目录. EddydeMacBook-Pro:~ eddy$ cd /Users ...

  4. pig中变量

    pig中的变量都是找到$变量然后替换,有点像宏,完全就是替换,看如下例子 %default m 'you';b = load 'a' as (a:chararray);c = foreach b ge ...

  5. hbase日常运维管用命令,region管理

    1         Hbase日常运维 1.1       监控Hbase运行状况 1.1.1        操作系统 1.1.1.1 IO 群集网络IO,磁盘IO,HDFS IO IO越大说明文件读 ...

  6. Linux之通配符与转义字符

    通配符: *:代表任意字符,可以为空字符 ?:代表一个字符,不可以为空字符 转义字符: \

  7. Windows 2008修改密码策略方法

    Windows Server 2008默认强制要求定期更改密码,这个功能有时实在是让人烦不胜烦,适当情况下可以考虑关闭. 方法如下: 1.按windows键+R(或者点开始---动行)打开运行窗口,输 ...

  8. javaSE第十八天

    第十八天    192 1:Map(掌握)    192 (1)定义:    192 (2)Map和Collection的区别?    192 (3)Map接口功能概述(自己补齐)    192 A: ...

  9. 第六章_PHP数组(二)

    这篇随笔是对预定义数组变量的总结.通过预定义数组变量,我们可以获得系统环境.用户对话.表单数据等信息. 1.服务器变量:$_SERVER 利用foreach语句打印$_SERVER中的所有元素: &l ...

  10. VS2013添加NuGet的方法

    1.工具->扩展和更新->联机 2.右上角搜索框搜索NuGet,选择NuGet Package Manager for Visual Studio 2013,安装后重启VS 下面通过添加N ...