利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
2024-06-12 19:36:41
利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录） 
作者：王可利（Star·星星）
总结：
今天学习的jQ类库的使用，代码重复的比较多需要完善。严格区分大小写，在 $("").css() 这里css是小写的，用 HBuilder 编写补全是大写的。。这里要注意
主要使用的方法：jQuery 隐藏 / 显示 jQuery 淡出淡入
需要注意的知识点：
效果的样式：
代码如下：（亲们 自己展开拉~）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
7 <style type="text/css">
8 /*.chdBox{
9 position: absolute;
10 width: 976px;
11 height: 65px;
12 background: url(img/nav.png)no-repeat left -65px;
13 }*/
14 span{ 15 float: left;
16 margin-top: -113px;
17 margin-left:44% ;
18 width: 168px;
19 height: 90px;
20 background: url(img/logo.png)no-repeat;
21
22 }
23 ul{ 24 width: 886px;
25 height: 65px;
26 margin-top: -3px;
27 margin-left: 4px;
28 }
29 .chdBox li{ 30 list-style: none;
31 float: left;
32 width: 88px;
33 height: 65px;
34 margin-left: 2px;
35 margin-right: 2px;
36 }
37 li{ 38 list-style: none;
39 width: 88px;
40 }
41 .chdBox2{ 42 position: absolute;
43 margin-left: 88px;
44 display: block;
45 }
46 .chdBox3{ 47 position: absolute;
48 margin-left: 180px;
49 display: block;
50 }
51 .chdBox4{ 52 position: absolute;
53 margin-left: 272px;
54 display: block;
55 }
56
57 .chdBox2 li,.chdBox3 li,.chdBox4 li{ 58 margin: 2px 0px;
59 text-align: center;
60 padding: 10px 0px;
61 }
62 .chdBox2 a,.chdBox3 a,.chdBox4 a{ 63 padding: 10px 10px;
64 text-decoration: none;
65 font: 400 15px/15px "微软雅黑";
66 color: white;
67 background-color: rgba(0,0,0,1);
68 }
69 .starbox{ 70 position: relative;
71 margin-left:50px;
72 top: 90px;
73 width: 880px;
74 height: 280px;
75 background-color: gray;
76 display: none;
77 }
78 p{ 79 position: absolute;
80 top: 0px;
81 }
82 </style>
83 </head>
84 <body>
85 <div class="chdBox" id="chdBoxID">
86 <ul>
87 <li id="nav1"><a href="#"></a></li>
88 <li id="nav2"><a href="#"></a></li>
89 <li id="nav3"><a href="#"></a></li>
90 <li id="nav4"><a href="#"></a></li>
91 </ul>
92 <span class="pic"></span>
93 </div>
94 <div class="starbox">
95 <div class="chdBox2" id="chdBoxID2" >
96 <li><a href="" class="star1" style="display: none;">最新热点</a></li>
97 <li><a href="" class="star2" style="display: none;">新闻中心</a></li>
98 <li><a href="" class="star3" style="display: none;">活动新闻</a></li>
99 <li><a href="" class="star4" style="display: none;">商城咨询</a></li>
100 <li><a href="" class="star5" style="display: none;">盛大新闻</a></li>
101 </div>
102 <div class="chdBox3" id="chdBoxID3" >
103 <li><a href="" class="star1" style="display: none;">统一商城</a></li>
104 <li><a href="" class="star2" style="display: none;">服饰搭配</a></li>
105 </div>
106 <div class="chdBox4" id="chdBoxID4" >
107 <li><a href="" class="star1" style="display: none;">基本介绍</a></li>
108 <li><a href="" class="star2" style="display: none;">新手学堂</a></li>
109 <li><a href="" class="star3" style="display: none;">职业介绍</a></li>
110 <li><a href="" class="star4" style="display: none;">升级指南</a></li>
111 <li><a href="" class="star5" style="display: none;">高手进阶</a></li>
112 <li><a href="" class="star6" style="display: none;">特色系统</a></li>
113 </div>
114 </div>
115
116
117 <script >
118 $(document).ready(function(){
119 $("#chdBoxID").css({
120 "position": "absolute",
121 "width": "976px",
122 "height": "65px",
123 "background" : "url(img/nav.png) no-repeat left -65px",
124 "top":"40px"
125 });
126
127 $("#nav2").mouseover(function(){
128 $("#chdBoxID2 .star1").fadeToggle(1000);
129 $("#chdBoxID2 .star2").fadeToggle(1300);
130 $("#chdBoxID2 .star3").fadeToggle(1500);
131 $("#chdBoxID2 .star4").fadeToggle(1700);
132 $("#chdBoxID2 .star5").fadeToggle(1900);
133 $(".starbox").fadeToggle("fast");
134 $("p").toggle("fast");
135 })
136 $("#nav2").mouseout(function(){
137 $("#chdBoxID2 .star1").fadeToggle("fast");
138 $("#chdBoxID2 .star2").fadeToggle("fast");
139 $("#chdBoxID2 .star3").fadeToggle("fast");
140 $("#chdBoxID2 .star4").fadeToggle("fast");
141 $("#chdBoxID2 .star5").fadeToggle("fast");
142 $(".starbox").fadeToggle("fast");
143 $("p").toggle("fast");
144 })
145
146 $("#nav3").mouseover(function(){
147 $("#chdBoxID3 .star1").fadeToggle(1000);
148 $("#chdBoxID3 .star2").fadeToggle(1300);
149 $(".starbox").fadeToggle("fast");
150 $("p").toggle("fast");
151 })
152 $("#nav3").mouseout(function(){
153 $("#chdBoxID3 .star1").fadeToggle("fast");
154 $("#chdBoxID3 .star2").fadeToggle("fast");
155 $(".starbox").fadeToggle("fast");
156 $("p").toggle("fast");
157 })
158 $("#nav4").mouseover(function(){
159 $("#chdBoxID4 .star1").fadeToggle(1000);
160 $("#chdBoxID4 .star2").fadeToggle(1300);
161 $("#chdBoxID4 .star3").fadeToggle(1500);
162 $("#chdBoxID4 .star4").fadeToggle(1700);
163 $("#chdBoxID4 .star5").fadeToggle(1900);
164 $("#chdBoxID4 .star6").fadeToggle(2100);
165 $(".starbox").fadeToggle("fast");
166 $("p").toggle("fast");
167 })
168 $("#nav4").mouseout(function(){
169 $("#chdBoxID4 .star1").fadeToggle("fast");
170 $("#chdBoxID4 .star2").fadeToggle("fast");
171 $("#chdBoxID4 .star3").fadeToggle("fast");
172 $("#chdBoxID4 .star4").fadeToggle("fast");
173 $("#chdBoxID4 .star5").fadeToggle("fast");
174 $("#chdBoxID4 .star6").fadeToggle("fast");
175 $(".starbox").fadeToggle("fast");
176 $("p").toggle("fast");
177 })
178 });
179 </script>
180
181 <p style="font: 500 18px/18px '微软雅黑';color: red;">彩虹岛官方网站，只做到了左边的4个 导航</p>
182 </body>
183 </html>代码 导入了JQ 和 两个图片
转载于:https://www.cnblogs.com/StarKL/p/6021427.html
利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）相关推荐
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
- 仿Apple官网导航条
仿Apple官网导航条效果在线预览 使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致 不会CSS动画,未有学习 flex掌握感觉还可以 媒体查询也懂得了一小部 ...
- 小米官网导航栏的实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 阴阳师官网导航栏 html+css
阴阳师官网导航栏 通过css html实现阴阳师官网的顶部导航栏 具体样式 下拉列表 下拉列表的实现 下面一起看看代码 <div class="header">< ...
- 前端 学完HTML+CSS 自己动手写出QQ官网导航栏
HTML+CSS实现QQ头部栏 一.找到QQ官网界面 在浏览器搜索QQ,找到QQ官网 我们做的就是QQ官网的头部内容 二.准备 (一).创建一个index.html文件编写html代码 (二).建一个 ...
- android高仿微信底部渐变导航栏
最近有很多人问微信底部的变色卡片导航是怎么做的,我在网上看了好几个例子,都是效果接近,都存有一些差异,自己琢磨也做了一个,几乎99%的还原,效果还不错吧 仔细观察微信图片,发现他有两部分内容,外面的边 ...
- 前端实现小米官网导航栏的实现 主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
话不多说直接上代码 首先看看小米商城的导航栏,如图: 通过实际测试可以知道,服务和社区不属于下拉菜单,除了这两个,剩下的全是下拉菜单,想成了一个下拉菜单组,一旦鼠标进入下拉菜单组,那么就会有下拉效果, ...
- html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要 我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
- HTML期末网页作业-仿QQ官网QQ注册网页
HTML期末作业-仿QQ官网QQ注册网页(HTML+CSS+JavaScript) 学生作业仿QQ官网部分代码截图 <!DOCTYPE html> <html lang=" ...
最新文章
- 李飞飞：物体识别之后，计算机视觉的进展、目标和前景何在？
- Python中的reduce
- 简单使用URLConnection、HttpURLConnection和HttpClient访问网络资源
- sqlserver2008r2安装
- 一个static和面试官扯了一个小时，舌战加强版
- sql devalop连接mysql_SQL-Mysql表结构操作
- 老项目引入masonry后报错unrecognized selector sent to instance
- android 盒子 串流,Steam流式盒子（Steam串流手机App）1.1.0 安卓正式版
- EagleEye的特性分析
- HOJ 12814 SIRO Challenge (状态压缩DP)
- 有关Android导览(Android Navigation component)
- fcpx字幕功能详细使用教程
- 中国手机充电器行业市场供需与战略研究报告
- C# 获取MP3/WMA音频数据信息
- php.ini 配置composer,composer安装配置
- 怎么找属于自己最优的2B增长模型？
- FP-Tree的Python实现
- 科密考勤机软件初次使用步骤
- 100-days: Five
- 栋的月结 | 第一回合（定期更新、动态、架构、云技术、算法、后端、前端、收听/收看、英文、书籍、影视、好歌、新奇）[含泪总结.. 憋泪分享！]
热门文章
- java文档检测重复_使用Simian进行重复代码检测
- Linux系统下_拷贝下载windows文件_出现linux文件名乱码
- 游戏设计参考：魔兽世界WOW角色的基本属性及其作用
- 剑灵建元服务器位置,韩服12月新版本 剑灵建元成道部分资料一览
- 用C语言读取png图片十六进制,C/C++ 二进制读写 png 文件
- 转载：首都医科大学校长饶毅实名举报3人学术论文造假
- 编写一个 Java 应用程序,该程序中有 3 个类:Triangle、T rapezium 和 Circle,分别用来 表示三角形、梯形和圆形。
- python课表查询系统_东南大学课表查询系统
- js 计算在AB两点连线上，距离A点一定距离的点的坐标
- 收藏点赞代码，发表评论代码