【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
【实战HTML5与CSS3 第二篇】绚丽的快速导航！
【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)
前言
先八卦一下，我昨天离职了，把电脑也退了，离职前，我发了一封邮件给整个部门，陈述自己的不舍与团队管理问题（估计传说中的leader要抓狂了），然后就昏昏的回家了，所以昨天没有什么产出。
最近经常有朋友惊叹我的发帖速度很快，其实是有原因的，我最近两周要离职，所以就不太理我那传说中的leader了，每天多出很多时间可以学习。
但是，下周后便会入职一家新公司了，我已经有感觉进去一段时间会很忙，会很有压力，这正是我所希望的，所以便不会向这样发帖了，
以后的话，一周能发10-15篇我感觉都不错了，为了我的理想“两年成为国内优秀的web前端技术人员”我会努力的。
废话结束，让我们进入正题，终于到了今天了，我这个五一是带着任务与觉悟来的，这几天我会试着以html5与css3实现这个网站：
http://www.zhinengshe.com/index.html
这是我见过的一个html5与css3比较好的网站了（因为见得不多），要做什么，我等下再一一说明。
我们会做什么？
无图无真相，我们先上几张图:
用高版本浏览器进入的同学会发现，他们的网站时做得很漂亮的，有很多不错的特效，我这里为巩固html5与css3的知识会尝试以下东西：
目录
首页左下角新闻相关数据采用本地数据库
使用最新的布局标签（并考虑向下兼容）
联系我们这块会用Geolocation api
期间还会用到其它一些东西，都只有看工作量说话了，因为我只有5.1的时间。时间多的话就全做，时间不够的话可能只做首页了。
好了，让我们开始吧，我们一步步来，第一步，完成其中的小特效：
美丽的导航
他这个导航还是很有特色的哟，先不看他们的实现，若是我做的话，后面估计会是背景图，然后会有点事件吧，光说不练，我还是试试吧！
初步效果
我的做法与原来的不太一致，就实现上来说我我的就是个试验品，与原版的无法比的，先看看我们这里干了些什么：
基本布局如下：
复制代码
<nav class="nav" id="nav">
<div>hover</div>
<ul>
<li><a href="javascript:;">首页</a><span></span></li>
<li><a href="javascript:;">JS课程</a><span></span></li>
<li><a href="javascript:;">HTML5课程</a><span></span></li>
<li><a href="javascript:;">视频课程</a><span></span></li>
<li><a href="javascript:;">课程案例</a><span></span></li>
<li><a href="javascript:;">联系方式</a></li>
</ul>
</nav>
复制代码
原网站布局我们这里就不说了，我这里使用了nav标签，nav标签据说有助于语义化，seo，盲人/手机阅读器，既然这么多好处，我们就使用吧。。。
这里也贴个原网站结果算了：
复制代码
<div class="navTxt">
<div style="left: 40px;" class="hover">
</div>
<a href="index.html">首 页</a><span></span><a href="js02_desc.html">JS课程</a><span></span><a
href="html5_01_desc.html">HTML5课程</a><span></span><a href="video.html">视频教程</a><span></span><a
href="works.html">课程案例</a><span></span><a href="contact.html">联系方式</a>
</div>
复制代码
他这里没有使用ul标签，我们说不管白猫黑猫能实现功能就是好猫，所以这里我就不关注他了，只看我自己的：
我这里布局实现代码没什么好说的，主要注意：
div是绝对定位的，nav是相对定位的，为他们设置了z-index相关用于显示，不用想在其它浏览器上估计会有bug；
然后使用了前面说的冒泡机制，将所有事件绑定到ul上，鼠标进入时，便记录lleft位置，然后改变div位置即可，这里还没有动画效果，等下加上。
PS：在其它浏览器下会很恐怖的，不建议看，后面我们在考虑下渐进增强
导航完整代码
这个导航完整代码，差是查了一点，但是还是可以看的。但是他整个过程不够平滑，因为我每移过一个li他便听一下，有时候我无意义的移过一个导航
他也会有所反应，这就造成了资源浪费与不好的用户体验，所以我们需要修正，还有其它一点细节：
最终版
虽然仍无法与原版媲美，但是已经比原来平滑多了，我做到这个程度基本上够了。
总结：
这块代码其实还是主要是jquery的东西，我们CSS3中的transitions也可以具备动画效果，但是这里使用他就感觉不太合适，
因为这里背景到达时有一定抖动效果；然后每次都会计算当前鼠标位置，所以除了js实现外，我还找不到好的办法呢。
绚丽的图片轮询
大家都看到了，他这个图片轮询展示结束后会碎成一块一块的，对于他的实现，至于你懂不懂，反正我是不懂了！！！
对于他的实现，我这边就当真一头雾水了，他的效果是令人惊艳的：
1 图片会碎成12块
2 每块会选择不同的反转，渐渐隐藏
PS：刚刚不注意点了下自动排版，我的css结构给破坏啦。。。将就用吧
我们来看看原版的html结构：
复制代码
1 <div class="slide">
2 <a class="slide_img" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1030939631&amp;site=qq&amp;menu=yes"
3 style="background: url("images/index_pic/2.png") no-repeat scroll 0% 0% transparent;">
4 </a>
5 <div class="number">
6 <div>
7 <a href="javascript:;"></a><span></span><a href="javascript:;"></a><span></span>
8 <a href="javascript:;"></a><span></span><a href="javascript:;"></a><span></span>
9 <a href="javascript:;"></a>
10 </div>
11 </div>
12 <div class="number2">
13 <div>
14 <a class="active" href="javascript:;" style="opacity: 1;"></a><span></span><a href="javascript:;"
15 class="" style="opacity: 0;"></a><span></span><a href="javascript:;" class="" style="opacity: 0;">
16 </a><span></span><a href="javascript:;" class="" style="opacity: 0;"></a><span>
17 </span><a href="javascript:;" class="" style="opacity: 0;"></a>
18 </div>
19 </div>
20 <a id="prev" class="prev" href="javascript:;"></a><a id="prev_active" class="prev_active"
21 href="javascript:;"></a><a id="next" class="next" href="javascript:;"></a><a id="next_active"
22 class="next_active" href="javascript:;"></a>
23 </div>
复制代码
里面有很多明奇妙的东西的，我们关注2-4行即可，这里我们发现，他其实就是一个a标签显示的图片是其背景图片了。
但其在IE（低版本浏览器）下结构如下：
复制代码
<ul style="left: -235.19px; top: 0px; width: 4200px; height: 305px; position: absolute;">
<li style='background: url("images/index_pic/2.png") no-repeat; width: 840px; height: 305px;
float: left;'></li>
<li style='background: url("images/index_pic/1.png") no-repeat; width: 840px; height: 305px;
float: left;'></li>
<li style='background: url("images/index_pic/3.png") no-repeat; width: 840px; height: 305px;
float: left;'></li>
<li style='background: url("images/index_pic/4.png") no-repeat; width: 840px; height: 305px;
float: left;'></li>
<li style='background: url("images/index_pic/5.png") no-repeat; width: 840px; height: 305px;
float: left;'></li>
</ul>
复制代码
所以我有理由相信，这可能是个完整的插件，而且做了向下兼容的哟，上面的导航亦有可能如此，具体我们先不关注，继续向下。
现在假想我们就是在最新的浏览器下，那么他这个特效应该如何实现呢？哎，确实不知道，查个资料吧。。。
最后网上发现了个代码，写得有点复杂，我真的打开一看，直接给跪了，代码大概就600行了，天知道里面有些什么，而且还没有写注释呢，看来我确实是想不出来了。。。。
于是我跟个小白似的在google里面检索“图片爆炸”，由陆陆续续出来了许多很酷的效果，我真的直接给跪了。。。。
PS:刚刚干其他研究搞久了，这边写了很多东西给死机了，然后一些内容就给丢失了！！！！
总之，图片爆炸这种功能网上还是有不少的，但是，代码都有点多，我这里不想调用其它插件，也不能写出来，就只好往戳的地方走。
比较戳的办法：
如图，外层一个div宽度高度固定，其背景图便是我们展示的图片，其内部有12个div绝对定位，再操作background-position形成以上图片。
现在，我们就只是操作12个div爆炸即可，其实这也不容易的。。。
最戳最原始的结果
如图所示，这里使用了一点CSS3的变形技术，做出了如此之戳的东西，真是令人感到汗颜。。。于是我继续研究，看可否优化！！！先保存一个再说！
这里做了一点微调后，效果好了不少：
微调后爆炸
功能看似实现了，但是这个样子非常不好，因为我一次性操作了12个div并且进行了较复杂的动画操作，这个样子对整个页面性能势必是有影响的！！！
若是各位在google下不能运行，需要改下代码，在css上面加上-webkit前缀
好了，差是差点，但是为了追求功能的完整，我还是先将这个功能完成，再慢慢优化吧！！！
PS：动画很烧CPU的，原版的依旧烧CPU，越是绚丽的效果，对性能影响越大！！！
flash完整代码
整个效果与原版相比又打了不小的折扣，而且性能方面是硬伤！！！接下来在想法优化吧！
结语
第一篇想不到写了这么久，从上午写到晚上了。。。。。因为在图片爆炸这一块研究花了很多时间，最后却得到一个不怎么满意的结果！
若是各位大哥对图片爆炸有什么好的方案的话，请一定说出来哟！
到后面时候，都有点累了就有点乱了，比如图片flash处右下角的分页按钮可以做优化，标签优化到只有一个，这里也没有关注了。
最后我提供阶段性下载地址吧，希望各位与我一起研究：
文件下载：
http://files.cnblogs.com/yexiaochai/html5css3.zip
有什么问题请各位讨论，初次做这种东西有点水，请各位见谅。
最后如果你觉得这篇文章还不错，请帮忙点击一下推荐，谢谢！
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/04/29/3050798.html，如需转载请自行联系原作者
