利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
利用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过程中的小记录）的更多相关文章
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- 【方法】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- 用Jquery 仿VS 样式的 导航栏插件
在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...
- CSS练习：仿小米官网
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
- （五）Spring Boot官网文档学习
文章目录 SpringApplication SpringApplication 事件 `ApplicationContext ` 类型 访问传递给 `SpringApplication` 的参数 A ...
- Spring Security 官网文档学习
文章目录 通过`maven`向普通的`WEB`项目中引入`spring security` 配置 `spring security` `configure(HttpSecurity)` 方法 自定义U ...
随机推荐
- Python面试里面的那些问题
Q:Python里面的数据结构都有哪些? 答:str,list,tuple,set,frozenset,dict,以上是Python默认的数据结构,还有容器类型collections,其中包含:Cou ...
- NopCommerce 3.80框架研究（一） 数据访问与持久化
NopCommerce 是一个国外的开源电商系统.3.80版本使用EF6.0 和.Net Framework 4.5.1 并引入了Autofac , Autofac是一款IOC框架,比较于其他的IOC ...
- 慕课网-安卓工程师初养成-3-9 Java中运算符的优先级
来源 http://www.imooc.com/code/1315 所谓优先级,就是在表达式中的运算顺序.Java 中常用的运算符的优先级如下表所示: 级别为 1 的优先级最高,级别 11 的优先级最 ...
- Class diagrams
So far we have seen stack diagrams, which show the state of a program, and object diagrams, which sh ...
- SVN与TortoiseSVN实战：TortoiseSVN新建及合并分支
硬广:<SVN与TortoiseSVN实战>系列已经写了两篇,第一篇<SVN与TortoiseSVN实战:从入门到精通>,关于分支和标签的知识介绍可翻阅第二篇<SVN与T ...
- 如何解决SWAT模型数据移动目录后出现的“SWAT2005.mdb database specified in your MasterProgress table does not exists. Please correct and try again”的问题
方法: 1.用MS Access软件打开SWAT模型工程文件的数据文件,如“**流域模拟.mdb”,该文件一般存放在工程文件“**流域模拟.mxd”相同的路径: 2.打开以后,找到“MasterPro ...
- [python 2.7.5] 实现配置文件的读写
import ConfigParser config = ConfigParser.RawConfigParser() # When adding sections or items, add the ...
- leetcode 101
101. Symmetric Tree Given a binary tree, check whether it is a mirror of itself (ie, symmetric aroun ...
- new_things
'NapCat' in AppStore for reading codes from github. and the ----minibufexpl | + nerd ...
- HTML5和CSS3的能量究竟是怎样的？
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...