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

笨笨狗

浏览: 293174 次
性别:
来自: 昆明

最近访客更多访客>>

dong_junshuai

czhh

popotans

aaaxuanxue

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax 新时代

Google prototype CSS IE 笑话

前几天在一个叫做友财网的地方发现这个好玩的导航，比较喜欢，看了看原始的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标签结构简洁清晰，而且圆角不需要任何额外的图片，灵活度高。

navigation.rar (67.9 KB)
描述: 源码示例
下载次数: 2836

查看图片附件

分享到：

原创：基于Prototype，利用Canvas绘图实现 ... | Prototype1.6以下Element.setStyle()的bug

2008-04-15 11:42
浏览 11198
评论(19)
论坛回复 / 浏览 (13 / 14248)
分类:Web前端
查看更多

19 楼 hanjs 2009-02-08

你这个不支持点击上面浮动出来的文字啊。

google的可以。

18 楼开心^o^就好 2008-12-12

最要命的是在a标签下了div
貌似在 a 标签下不能嵌套 div 能不能说一下原因啊

17 楼 cunshangr 2008-07-09

很帅，很喜欢。

16 楼 yudream 2008-07-08

我看了例子很不错哦
学习ING

15 楼 zbm2001 2008-07-08

修改了下：

引用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zCool</title>
<style type="text/css" >
#g{ display:inline;}
#g li{
list-style:none;
float:left;
margin:10px;
width:50px;
height:37px;
background:url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png) no-repeat;
cursor:pointer;
}
#g a{
position:absolute;
padding:48px 0 0;
width:50px;
font:12px/22px "宋体";
text-align:center;
white-space:nowrap;
text-decoration:none;
}
#g a:hover{
color:#f00;
text-decoration:underline;
}
em.new{
color:#f00;
font:10px "宋体";
vertical-align:top;
}
img{ border:1px dashed #ccc;}
</style>
</head>
<body>
<ul id="g">
<li><a href="javascript:;" title="搜索热门网络视频">视频</a></li>
<li><a href="javascript:;" title="搜索全球的图片">图片</a></li>
<li><a href="javascript:;" title="搜索您身边的分类生活信息">生活<em class="new">新!</em></a></li>
<li><a href="javascript:;" title="查询地址、搜索周边和规划线路">地图</a></li>
<li><a href="javascript:;" title="商业信息、财经新闻、实时股价和动态图表">财经</a></li>
<li><a href="javascript:;" title="查看分类热门搜索排行">热榜</a></li>
<li><a href="javascript:;" title="网址大全、快速直达分常用网站">网站导航</a></li>
</ul>
<img src="http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png" />
<script type="text/javascript">
// IE缓存图像
try{
document.execCommand("BackgroundImageCache", false, true);
}
catch(e){
}

var li=document.getElementById("g").getElementsByTagName("li"), intervalId, j=0;
for(var i=0, l=li.length; i<l; i++){
var lii=li[i], bp="0px "+(i*-37)+"px";
lii.style.backgroundPosition=bp;
lii.onmouseover=function(){
intervalId=setInterval((function(o){return function(){flash.call(o)}})(this), 50);
};
lii.onmouseout=(function(bp){
return function(){
intervalId=clearInterval(intervalId);
j=0;
this.style.backgroundPosition=bp;
}
})(bp);
}

function flash(){
var ts=this.style;
if(j<5){
if(j<4){
ts.backgroundPosition=ts.backgroundPosition.replace(/^(-?\d+)(?=px\s-?\d+px)/, function(){return parseInt(arguments[1])-52;});
}else{
ts.backgroundPosition=ts.backgroundPosition.replace(/(-?\d+)(?=px$)/, function(){return parseInt(arguments[1])+4;});
}
j++;
}else{
intervalId=clearInterval(intervalId);
j=0;
}
};
</script>
</body>
</html>

14 楼 zbm2001 2008-07-07

讨论这个有点偏题了，抱歉，呵呵

另外，下面这个是我之前写的，也内存泄漏问题，希望得到指点修正一下：

引用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zCool</title>
<style type="text/css" >
#g li{
list-style:none;
float:left;
margin:20px;
border:1px solid #ccc;
width:50px;
height:37px;
background:url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png) no-repeat;
cursor:pointer;
}
img{
border:1px dashed #ccc;
}
</style>
</head>
<body>
<ul id="g">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img src="http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png" />
<script type="text/javascript">
var _setInterval=window.setInterval;
window.setInterval=function(fn, delay){
if(typeof fn=="function"){
var args=Array.prototype.slice.call(arguments, 2);
var f=function(){fn.apply(null, args)};
return _setInterval(f, delay);
}
return _setInterval(fn, delay);
}

var li=document.getElementById("g").getElementsByTagName("li"), intervalId, j=0;
for(var i=0, l=li.length; i<l; i++){
var lii=li[i], bp="0px "+(i*-37)+"px";
lii.style.backgroundPosition=bp;
lii.onmouseover=function(){
intervalId=setInterval(flash, 50, this.style);
};
lii.onmouseout=(function(bp){
return function(){
intervalId=clearInterval(intervalId);
j=0;
this.style.backgroundPosition=bp;
}
})(bp);
}

function flash(ts){
if(j<5){
if(j<4){
ts.backgroundPosition=ts.backgroundPosition.replace(/^(-?\d+)(?=px\s-?\d+px)/, function(){return parseInt(arguments[1])-52;});
}else{
ts.backgroundPosition=ts.backgroundPosition.replace(/(-?\d+)(?=px$)/, function(){return parseInt(arguments[1])+4;});
}
j++;
intervalId=clearInterval(intervalId);
intervalId=setInterval(flash, 50, ts);
}else{
intervalId=clearInterval(intervalId);
j=0;
}
};
</script>
</body>
</html>

13 楼 zbm2001 2008-07-07

你说的这个是html语言规范定义的合法嵌套关系，以及这种关系下对应的默认样式
比如：
<span><div></div></span>
很明显从语义上就是错误的，内联区域当然不能反过来包含basal分区
这一点当然大家都没有什么疑议。

但是——这种表现语义上合法嵌套关系对应的默认样式，是否也对CSS样式渲染做了规约呢？

通览CSS1-3，找不到这样的显式约定或关联的隐式约定，
再者，如果规范里有这方面的规约（或者是浏览器开发人员公认的），相信大多数遵循标准的现代浏览器都会对定义inline样式的元素所包含的子元素所做的block样式定义拒绝渲染的。

引用

<a href="javascript:;" style="background:#ff0;">aa<span style="display:block;margin:20px auto; height:100px; background:#f00;">bb</span>cc</a>dd

aa被分割为一个匿名block（但<a></a>依然表现内联样式特性），span定义为block后margin-top和margin-bottom也可以被正常渲染。

12 楼笨笨狗 2008-07-05

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

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

    </dd>
</dl>

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

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

11 楼笨笨狗 2008-07-05

zbm2001 写道

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

参见以下链接：

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

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

A

* inline excluding an enclosed A element

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

10 楼 zbm2001 2008-07-04

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

9 楼 zbm2001 2008-07-04

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

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

8 楼 fly_0921 2008-06-10

不错哈哈。

7 楼 zhouzhao21 2008-04-25

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

6 楼 zhouzhao21 2008-04-18

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

5 楼 edokeh 2008-04-17

强烈期待详细讲解，LZ真高人也

4 楼 johnnyhg 2008-04-16

期待博主的详细讲解，博主的的js功力不是一般的强啊！

3 楼 xl45591275 2008-04-15

期待详细介绍~!~!~!

2 楼 codman 2008-04-15

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

1 楼笨笨狗 2008-04-15

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论