<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿谷歌导航栏</title>
<link type="text/css" rel="stylesheet" href="navigation.css" />
<style type="text/css">
h2.title {
font-size: 14px;
}
div.describe {
font-size: 12px;
text-indent: 2em;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="navigation.js"></script>
<script type="text/javascript">
document.observe("dom:loaded",function(){
var example = [
"依次引入prototype.js,effects.js,excanvas.js(这个需要用到IE的条件注释),navigation.js",
"HTML代码结构：",
" <div id='example' class='navigation'>",
" <ul>",
" <li>",
" <a href='#' title='这里的内容将被放到提示框'>文字</a>",
" </li>",
" ……重复上述<li>元素即可构造多个连接",
" </ul>",
" </div>",
" ",
"Javascript代码：",
" 文档载入完毕后，初始化导航对象，参数为一对象字面量构造",
" {wrap:'上述HTML代码里面最外层div的id，这里为\"example\"',duration:'每帧间隔时间(秒)'}",
" new Navigation({wrap:'example',duration:0.1});"
].inject("",function(acc,str){
return acc + "<p>" + str.escapeHTML() + "</p>";
});
$("code").innerHTML = example;
new Navigation({
wrap: "nav",
duration: 0.1
});
});
</script>
</head>
<body>
<h2 class="title">Prototype导航条</h2>
<div class="describe">
<p>使用Prototype、Script.aculo.us框架构建，并利用canvas绘制圆角，兼容IE6、7/FF2、Op9。<a href="http://scriptfans.javaeye.com">欢迎交流</a></p>
<div id="nav" class="navigation">
<ul>
<li>
<a href="#" title="返回首页">首页</a>
</li>
<li>
<a href="#" title="这是收藏夹">收藏夹收藏夹收藏夹</a>
</li>
<li>
<a href="#" title="在这里，您可以安排自己的日程表">日程表</a>
</li>
<li>
<a href="#" title="本站公告处">公告板</a>
</li>
<li>
<a href="#" title="一些我们的介绍">关于我们</a>
</li>
<li>
<a href="#" title="遇到困难啦？进来瞧一瞧吧">帮助</a>
</li>
<li>
<a href="#" title="给点建议吧^_^">留言板</a>
</li>
</ul>
</div>
</div>
<h2 class="title">使用方法</h2>
<div class="describe">
<pre id="code"></pre>
</div>
</body>
</html>
仿Google导航条效果
4星 · 超过85%的资源 需积分: 9 159 浏览量
2008-12-29
17:41:58
上传
评论
收藏 68KB RAR 举报 
Google导航条效果.rar （7个子文件） 
基于Prototype和Canvas实现的仿Google导航条 
nav.jpg 26KB
navigation.css 991B excanvas.js 9KB effects.js 38KB
navigation.html 3KB navigation.js 4KB prototype.js 121KB资源评论
由浩熙2012-07-11非常棒，留下作为自己学习的素材了，我是JS的初学者，谢谢分享者
