发布一个基于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已经很久了，后来大家说是人家先发明的，要不还以为是友财网的专利呢，哈哈……

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

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

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

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