发布一个基于Prototype和Canvas实现的仿Google导航条

前几天在一个叫做友财网的地方发现这个好玩的导航，比较喜欢，看了看原始的html代码结构，发现比较臃肿，而且不符合web标准，用了表格来布局，最要命的是在a标签下嵌套了div，大家都知道，inline元素下面是不能包含block元素的：（

对于我这个极端主义分子，还有什么好说的呢，既然喜欢俺就自己做一个得了！因为讨厌无意义的标记，所以考虑用canvas来实现提示框的绘制，因此页面上需要引入google的excanvas库，增大了下载量，比较遗憾，如果你觉得无法忍受，那么可以暂时等等，或许接下来我会改成css圆角实现的，等不及的话自己改改源码得了 ，不是很难^_^

原理主要是按某个时间间隔动态修改元素背景图的backgroundPosition值，产生动画错觉，至于提示信息的边框圆角和箭头，都可以用canvas画，减少了图片。

如果大家感兴趣，接下来可以写一篇教程，详细介绍其实现过程和关键点技术。

附件是效果图以及源码。欢迎交流：）


使用方法：

首先，依次引入prototype.js,effects.js,excanvas.js(这个需要用到IE的条件注释),navigation.js，以及navigation.css样式表，然后在需要生成导航的位置放上以下HTML结构：

    
<div id='example' class='navigation'>
    <ul>
        <li>
            <a href='#' title='这里的内容将被放到提示框'>文字</a>
        </li>
        ……重复上述<li>元素即可构造多个连接
    </ul>
</div>
    

然后，在页面载入完毕之后，初始化导航对象，参数为一对象字面量构造"{wrap:'上述HTML代码里面最外层div的id，这里为"example"',duration:'每帧间隔时间(秒)'}"，如下：

new Navigation({wrap:'example',duration:0.1});

这样一来就生成了你自己漂亮的导航条了，呵呵。综合说来，这个实现HTML标签结构简洁清晰，而且圆角不需要任何额外的图片，灵活度高。

说个郁闷的事大家不要笑话啊，之前就不知道这是google发明的，因为不上Google.cn已经很久了，后来大家说是人家先发明的，要不还以为是友财网的专利呢，哈哈……

不错，其实我也现在现在个人的网站上用的，但就是搞出自己想要的这种图片

呵.希望能写个教程出来....

很不错，不过感觉大了一点。

呵,今天才想起来下来看...挺不错的.

不错，我也是个极端主义分子，非常讨厌无意义的标记，凡事也喜欢自己动手……

不过这个论点有点问题：“inline元素下面是不能包含block元素的”
我不知道——谁告诉你的？

另外，友财网那个效果还似乎有内存溢出现象。

参见以下链接：

http://www.cs.tut.fi/~jkorpela/html/strict.html

可能我说的比较含糊，但是对照此表，也还说得过去……
注意看这里

A

* inline excluding an enclosed A element

这个概念是每个前端开发人员都应该了解的吧？

如果不用通过严格验证，那倒无所谓。但是有的情况下你会遇到很郁闷的事情，比如，试试在<dt>里面嵌套block元素：

<dl>
    <dt>
        <h1>test</h1>
    </dt>
    <dd>

    </dd>
</dl>

这是很常见的“想当然”做法，本来嘛，按照语义，你想让定义列表的title更有意义，搞了个一级标题，但是却超乎你想想……为什么？请用firebug看看生成的实际html树就知道了……

所以，遵循一定的嵌套规则不止是为了更符合标准，在某些时候还是必须的。