【实战HTML5与CSS3 第二篇】绚丽的快速导航!

简介:
目录

【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!

【实战HTML5与CSS3 第二篇】绚丽的快速导航!

【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)

前言

今天9点就起来了,因为下午出去有个聚会,所以就早点起来进行,否则这个进度有点吃紧啊,昨天初略的完成了导航以及爆炸的图片,这里来回顾下:

1 导航为一个div背景跟着导航栏目移动,并有一定抖动感觉,这个完全是jquery的东西了,若是用css3我暂时没有想到解决方案;

2 图片爆炸功能,这个功能就现在来说都是有很多问题的,都不能用瑕疵来说,第一效果不能达到我的要求,第二性能上恐怕有问题,这块也亟待优化。

但是,昨天纠结爆炸这块纠结了4、5个小时,若是现在再耗时间,恐怕这次计划就落空了,所以先以进度为要吧。

绚丽的快速导航

我们来看看他这个快速导航干了些什么?





我们看到他这个效做的十分绚丽的:

点击快速导航后,整个图标跑到了中心位置,然后里面的菜单再从几个方向蹦出来,点击关闭后又还原了,真是令人动容的用户感受啊!

那我们来看看该如何实现呢? 用jquery我想应该是可以实现的,但是我这里想试试CSS3可否完成我的要求,于是我们一起动手吧。

做的过程中我就不完全照着他的方法来了吧,加一点点自己的小创意:那个关闭按钮我们用CSS3来做!

基本结构如下:

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input 
{ border: 0 none; margin: 0; padding: 0; }
 7         body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000;
 font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; }
 8         
 9         ul, ol { list-style-type: none; }
10         select, input, img { outline: medium none;  vertical-align: middle; }
11         a { text-decoration: none;  outline: medium none; }
12         
13         #fast_nav  { width: 606px; height: 376px; background: url("images/fast_nav_open.png") no-repeat; position: relative; 
top: 50px; left: 100px; }
14         #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; 
right: -8px; top: -8px;  }
15         #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0; 
border: 1px solid white; transform: rotate(45deg); cursor: pointer; }
16         #fast_nav_close .nav_x {  width: 13px; height: 1px;  margin: 11px auto;  }
17         #fast_nav_close .nav_y {  height: 13px;  width: 1px; margin: -20px auto;  }
18         #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px; 
position: absolute; left: 267px; top: 152px;}
19     </style>
20     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
21     <script type="text/javascript">
22         $(document).ready(function () {
23 
24         });
25 
26     </script>
27 </head>
28 <body>
29     <div id="fast_nav">
30         <div id="fast_nav_bt">fast_nav
31         </div>
32         <div id="fast_nav_close">
33             <div class="nav_x">x
34             </div>
35             <div class="nav_y">y
36             </div>
37         </div>
38         <div id="fast_nav01">
39         </div>
40         <div id="fast_nav02">
41         </div>
42         <div id="fast_nav03">
43         </div>
44         <div id="fast_nav04">
45         </div>
46     </div>
47 </body>
48 </html>
复制代码


大家看看右上角的关闭按钮,这就是我的小花样!而且在其它浏览器上估计会失效。。。但是当做巩固css3吧,我就不管了。

在最新浏览器下叛变结束:

初步排版结束


好了,我们继续,现在是css控制显示相关的代码:

css控制开关




点击展开,再次点击关闭,这里有个优化点,我判断的时候是查看dom是否包含class,这个应该放到内存,而不是dom,后面点优化。现在我们看看动画效果如何实现。

很戳的效果

css很戳的效果


 这个效果很难看的,完全不是我所希望的,而且点击快速导航会有一定抖动效果,这个可能又要用jquery实现了。。。

 这里还有个问题就是,里面的文字被挤压,变得非常难看,整个用户体验很差,这块还要继续了。

完整代码
到此功能代码大概完成,只剩下优化部分需要处理了。

结语

今天的任务没能完成,本来计划的是先做这个快递导航特效,然后再做一点本地数据库的东西,然后就差最后的排版了。

谁知道,快速导航这块工作量还不少,花了不少时间,加之今天5.1出去聚会了,到现在才回来,所以这篇文章有点粗制滥造了。

对于本功能,开始想的是使用css3动画效果,但是他的特效很强大,css3恐怕有点吃力,所以这里就用了jquery的动画效果了,

但是,你知道jquery的效率的,代码上的特效运行几次后就这个样子了:



很烧CPU的,所以这块功能还需要优化。

观察这两天的工作量,明天估计最乐观就是把首页完成了。。。





本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/05/01/3051632.html,如需转载请自行联系原作者
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
3月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
6月前
随机二次元背景毛玻璃个人导航HTML源码
随机二次元背景毛玻璃个人导航HTML源码
405 18