笨笨狗
- 浏览: 291267 次
- 性别:
- 来自: 昆明
-
文章分类
最新评论
-
wwangchenyu：
这个工具相当牛逼，太好用了~
Dash：程序员的的好帮手 -
woshi555bin：
...
原创：基于Prototype，利用Canvas绘图实现的web流程图设计器（原型） -
cosmo1987：
赞
Dash：程序员的的好帮手 -
jofy1004：
很强大的工具
Dash：程序员的的好帮手 -
riseliang：
高大上！高大上！高大上！
Dash：程序员的的好帮手
前几天在一个叫做友财网的地方发现这个好玩的导航，比较喜欢，看了看原始的html代码结构，发现比较臃肿，而且不符合web标准，用了表格来布局，最要命的是在a标签下嵌套了div，大家都知道，inline元素下面是不能包含block元素的：（
对于我这个极端主义分子，还有什么好说的呢，既然喜欢俺就自己做一个得了！因为讨厌无意义的标记，所以考虑用canvas来实现提示框的绘制，因此页面上需要引入google的excanvas库，增大了下载量，比较遗憾，如果你觉得无法忍受，那么可以暂时等等，或许接下来我会改成css圆角实现的，等不及的话自己改改源码得了 ，不是很难^_^
原理主要是按某个时间间隔动态修改元素背景图的backgroundPosition值，产生动画错觉，至于提示信息的边框圆角和箭头，都可以用canvas画，减少了图片。
如果大家感兴趣，接下来可以写一篇教程，详细介绍其实现过程和关键点技术。
附件是效果图以及源码。欢迎交流：）
使用方法：
首先，依次引入prototype.js,effects.js,excanvas.js(这个需要用到IE的条件注释),navigation.js，以及navigation.css样式表，然后在需要生成导航的位置放上以下HTML结构：
然后，在页面载入完毕之后，初始化导航对象，参数为一对象字面量构造"{wrap:'上述HTML代码里面最外层div的id，这里为"example"',duration:'每帧间隔时间(秒)'}"，如下：
这样一来就生成了你自己漂亮的导航条了，呵呵。综合说来，这个实现HTML标签结构简洁清晰，而且圆角不需要任何额外的图片，灵活度高。
不过这个论点有点问题：“inline元素下面是不能包含block元素的”
我不知道——谁告诉你的？
参见以下链接：
http://www.cs.tut.fi/~jkorpela/html/strict.html
可能我说的比较含糊，但是对照此表，也还说得过去……
注意看这里
A
* inline excluding an enclosed A element
这个概念是每个前端开发人员都应该了解的吧？
对于我这个极端主义分子，还有什么好说的呢，既然喜欢俺就自己做一个得了！因为讨厌无意义的标记，所以考虑用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标签结构简洁清晰，而且圆角不需要任何额外的图片，灵活度高。
分享到：
评论
19 楼
hanjs
2009-02-08
你这个不支持点击上面浮动出来的文字啊。
google的可以。
google的可以。
18 楼
开心^o^就好
2008-12-12
最要命的是在a标签下了div
貌似在 a 标签下不能 嵌套 div 能不能说一下原因啊
貌似在 a 标签下不能 嵌套 div 能不能说一下原因啊
17 楼
cunshangr
2008-07-09
很帅，很喜欢。
16 楼
yudream
2008-07-08
我看了 例子 很不错哦
学习ING
学习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>
引用
<!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>
另外，下面这个是我之前写的，也内存泄漏问题，希望得到指点修正一下：
引用
<!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也可以被正常渲染。
比如：
<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元素：
这是很常见的“想当然”做法，本来嘛，按照语义，你想让定义列表的title更有意义，搞了个一级标题，但是却超乎你想想……为什么？请用firebug看看生成的实际html树就知道了……
所以，遵循一定的嵌套规则不止是为了更符合标准，在某些时候还是必须的。
<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元素的”
我不知道——谁告诉你的？
不过这个论点有点问题：“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已经很久了，后来大家说是人家先发明的，要不还以为是友财网的专利呢，哈哈……
发表评论
-
Javascript数组类型检测：编写更强壮的isArray函数
2009-01-19 13:17 11449在日常开发中，我们经 ... -
我看《Ajax企业级开发》
2008-12-03 15:55 3709Ajax从2005年 ... -
原创：基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）
2008-04-16 10:18 15829刚才在首页看到这么个 ... -
Prototype1.6以下Element.setStyle()的bug
2007-12-01 11:40 2160问题：如果在frame、iframe页面中使用了setStyl ... -
最值得期待的好书：《Pro CSS and HTML Design Patterns》
2007-05-28 17:24 9447没事上Apress的网站闲逛，偶然发现这本新书 ... -
AJAX表格分页模板(续):服务器端实现
2007-05-23 17:08 8747AJAX表格分页模板：探讨基于Prototype框架的java ... -
AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（下）
2007-05-18 13:10 11484AJAX表格分页模板：探讨基于Prototype框架的java ... -
为aptana增加firefox预览tab
2007-05-17 14:09 6607一直以来，aptana都是我首选的AJAX前台 ... -
AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）
2007-05-16 12:31 12960在上一篇文 ... -
AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上）
2007-05-14 19:16 12419数据分页显示，是很普遍的需求，传统的实现大多是 ... -
我看《javascript dom编程艺术（dom scripting）》
2007-01-31 02:49 2820这本书在刚出版的时候，编辑就送了一本给我，可惜那段时间出差在外 ... -
腾讯，我无言了
2007-03-14 10:11 2188今天看到一个python群公告上显示有新的文章，好奇点进去想到 ... -
初学者的良师益友——写在《Ajax与Java高级程序设计》出版之际
2007-03-29 02:22 1921最近有朋友向我询问如 ...
相关推荐
基于cropperjs和canvas实现的图片裁剪
canvas拼图游戏,基于html + canvas画布实现
基于openlayers和canvas绘制海量数据的实现
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
插件描述：基于HTML5 Canvas实现的图片马赛克模糊特效.
基于jquery，利用canvas自带的api，实现了一个鼠标点击对应点后，可拖动的一个插件
基于HTML5 canvas实现图片马赛克特效，非常不错的HTML5图片特效代码，支持自定义马赛克模糊 程度，挺不错的H5页面特效，当然还需要JS的支持。
基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于...
pagemap.js是一款基于canvas的web页面mini导航面板插件。该插件可以为web页面制作出类似sublime编辑器右侧的mini导航面板效果。
html5在线编辑器基于canvas实现
基于canvas的鼠标绘制矩形框的demo，多个canvas对象下支持选中，平移，删除操作，代码用VUE实现的
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
Draw2.js 一个基于h5 canvas实现的简单图形引擎。
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
基于HTML5 Canvas实现的会跳舞的时间粒子动画效果源码.zip
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
基于html5 canvas实现的动态文字特效代码
css3实现图片模糊，canvas实现交互设计，简单，简单，简单，简单，简单，简单单