发布一个基于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标签结构简洁清晰,而且圆角不需要任何额外的图片,灵活度高。

  • 描述: 静态效果图,推荐大家下载源码观看最好:)
  • 大小: 10.6 KB

发表评论

电子邮件地址不会被公开。 必填项已用*标注