流界面之动态图标导航栏

做这个导航栏的初衷，是想在公司产品的后台界面里，模仿MAC OS X系统的dock效果，所谓dock，就是OS X桌面底部那条显眼的工具栏，我的UBUNTU桌面里也有类似的效果……

实际上我也没用过MAC，所以是凭想象做的，演示页面在此

右上角的导航栏是默认的效果，鼠标滑过时图标变大，会推挤旁边的图标。
下面第一排去掉了推挤效果。
第二排加入了左右移动的功能，图标的数量远远超出页面的宽度，只显示其中一部分，在导航栏上左右移动鼠标时，整个导航栏会向相反方向滑动，显示出隐藏的图标。
第三排把移动的操作改到了左右两侧的箭头，鼠标停留在箭头上时，导航栏就会向对应的方向滑动，鼠标离开箭头时滑动停止，当滑动到最末端的图标时，自动停止。

先实现导航栏的默认效果，HTML如下：

1. <div class="iconbarout">
3. <divid="iconbar0" class="iconbar" >
5. <ul style="margin-left:0px;">
7. <li>
8. <ahref="#">
10. <imgsrc="images/icon7.png" style="width:68px;height:68px;" onload="alphaPNG(this);" onmouseover="largeIcon(this);" onmouseout="reIcon(this);" />
12. <span>link7</span>
13. </a>
14. </li>
17. <li>
18. <ahref="#">
20. <imgsrc="images/icon6.png" style="width:68px;height:68px;" onload="alphaPNG(this);" onmouseover="largeIcon(this);" onmouseout="reIcon(this);" />
22. <span>link6</span>
23. </a>
24. </li>
27. </ul>
28. </div>
31. </div>

为了追求立体感，图标不能有背景色，所以必须用透明PNG图片，这里用<img>标签插入图片，是因为要实现图标的缩小放大效果（CSS背景里的图片只能控制位置，不能改变大小），图标的长宽要写在元素的style属性里，方便JS程序控制。

由于IE6不支持PNG的透明背景，必须用滤镜来做HACK才能达到一样的效果，而滤镜只能写在CSS的背景属性里…………为了解决这个矛盾，就要依靠JS了：

1. function alphaPNG(png)
2. {
3. varaVersion=navigator.appVersion.split("MSIE");
5. varversion=parseInt(aVersion[1]);
6. varpp=png.parentNode;
8. if((version>=5.5) && (version<7) && (document.body.filters) )
10. {
11. var mout=png.onmouseout.toString();
13. var mover=png.onmouseover.toString();
15. alphaHTML="<span style=/"cursor:pointer;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='"+png.src+"');display:block;width:"+png.style.width+";height:"+png.style.height+";/" onmouseover=/""+mover.substring(mover.indexOf("{")+1,mover.lastIndexOf("}"))+"/" onmouseout=/""+mout.substring(mout.indexOf("{")+1,mout.lastIndexOf("}"))+"/" ></span>";
17. png.outerHTML=alphaHTML;
18. }
20. }

这个函数已经写在图片的onload事件里了，会在IMG标签的内容加载完后触发（这个事件虽好，也不能到处乱用，根据伟大的犀牛书V5， onload只支持body, frameset, img），函数先判断浏览器类型和版本（IE7支持透明PNG），先创建一个span元素，IMG标签的所有属性、事件都原样COPY到SPAN上，而 PNG图片则放到SPAN的背景里，用滤镜处理成透明，注意滤镜属性里必须要有sizingMethod=scale。最后用outerHTML（只有 IE支持）把该IMG替换成span。

导航栏的样式：

1. .iconbarout
2. {
3. width:770px;
5. position:absolute;
6. top:40px;right:10px;
8. }
10. .iconbar{
11. overflow:hidden;
12. float:left;
14. }
16. .iconbarli{
17. float:right;
18. padding:0px;
20. width:auto;
21. text-align:center;
22. margin:016px 0 0px;
24. }
25. .iconbarli span{
26. color:#333;
27. font-weight:600;
29. width:auto;
30. display:block;
31. float:none;
33. margin:0pxauto;
34. }
35. .iconbarli a img{
36. margin:0pxauto;
38. float:none;
39. }
40. .iconbarli a{
41. text-align:center;
43. float:none;
44. margin:0pxauto;
45. }
46. .iconbarli img{
48. border:0px;
49. float:left;
50. }

这样就在IE和Firefox里实现一样的视觉效果了（这里存在一个问题，为了保证图标放大后的清晰度，初始的图标都是缩小的，在IE7和Firefox里都会看到一点锯齿，而IE6由于用了滤镜，缩小的图标边缘仍然是平滑的-_____-b）

接下来做鼠标滑过的放大缩小效果。JS的动画效果一般是利用setTimeout或setInterval的延迟功能，反复循环来实现的。为了避免这些图标在运行函数时发生冲突，我把缩放的动画效果封装到了一个类里：

1. /* zoom class by Dexter.Yy
2. ********************************************************/
4. functionanimeZoom(ico,gWidth,gHeight,nWidth,nHeight)
6. {
7. this.png=ico;
8. this.iheight=nHeight;
10. this.iWidth=nWidth;
11. this.goWidth=gWidth;
12. this.goHeight=gHeight;
14. this.rico;
15. }
17. animeZoom.prototype.zoomEvent=function()
19. {
20. if(this.iWidth<this.goWidth)
21. {
22. this.goEnlarge();
24. }
25. elseif(this.iWidth>this.goWidth)
26. {
28. this.goReduce();
29. }
31. }
33. animeZoom.prototype.goEnlarge=function()
35. {
36. this.png.style.width=this.goWidth+"px";
38. this.png.style.height=this.goWidth+"px";
40. }
42. animeZoom.prototype.goReduce=function()
43. {
44. varobj=this;
46. varh=parseInt(this.png.style.height);
48. varw=parseInt(this.png.style.width);
50. if(w>this.goWidth)
51. {
52. this.png.style.width=w-2+"px";
54. this.png.style.height=h-2+"px";
56. this.rico=setTimeout(function(){obj.goReduce();},30);
58. }
59. else
60. {
61. window.clearTimeout(this.rico);
63. }
64. }

使用时要传5个参数：目标对象、期望达到的宽度、期望达到的高度、原始宽度、原始高度，像这样：

1. function largeIcon(png)
2. {
3. varlIco=new animeZoom(png,91,91,68,68);
5. lIco.zoomEvent();
6. }
8. functionreIcon(png)
10. {
11. varrIco=new animeZoom(png,68,68,91,91);
13. rIco.zoomEvent();
14. }

OK完工……如果是在FLASH里做这种推挤效果，可能还要写一大堆AS，但这里有CSS的浮动属性帮忙，就很省事……