博客园丁
我是博客园的一丁,我会永不停顿,不停创新。
posts - 99, comments - 126, trackbacks - 21, articles - 23
::
首页
::
新随笔
::
联系
::
订阅
::
管理
效果直逼flash的Div+Css+Js菜单
Posted on 2006-11-05 15:20
Jason.Jiang
阅读(4999)
评论(4)
编辑
收藏
网摘
HTML代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css 菜单</title> <style> body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:relative; } #fbtn_txt div{ height:30px; padding-top:11px; font-size:12px; font-family:small fonts; color:#800080; text-align:center; cursor:hand; } #fbtn_mask{ background-color:#ffffff; position:relative; width:100%; height:100%; } </style> </head> <body> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>G1</div> <div>good morning</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>G2</div> <div>good evening</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>M1</div> <div>my name is fireyy</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>M2</div> <div>mm mm i love u</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>G1</div> <div>good morning</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>G2</div> <div>good evening</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>M1</div> <div>my name is fireyy</div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>M2</div> <div>mm mm i love u</div> </div> </div> <script> var current=null; var t=null; for(var i=0;i<fbtn.length;i++){ fbtn_txt[i].style.posTop=-30; fbtn_mask[i].style.posTop=-30; fbtn[i].index=i; fbtn[i].style.display="block"; fbtn[i].onmouseover=function(){ if(!current){ current=this; domove(this.index); } else if(current!=this){ domove(current.index); domove(this.index); current=this; } } fbtn[i].onmouseout=function(){ if(event.toElement==this.parentElement&t==this){ domove(this.index); current=null; } } } function domove(num){ var o=fbtn_txt[num]; var m=fbtn_mask[num]; if(o.style.posTop<-60){ o.style.display="none"; var t=o.children[1].innerHTML; o.children[1].innerHTML=o.children[0].innerHTML; o.children[0].innerHTML=t; o.style.posTop=-30; o.style.display="block"; if(m.style.posTop>30) m.style.posTop=-30; else m.style.posTop=0; } else{ m.style.posTop+=3; o.style.posTop-=3; setTimeout('domove('+num+')',15); } } </script> </body> </html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
0
0
0
(请您对文章做出评价)
«
上一篇:
SOA相关概念解析
»
下一篇:
在dos下演示用字符看星球大战!
Feedback
#1楼
回复
引用
2006-11-08 17:52 by
ds[匿名][未注册用户]
dsdsd
#2楼
回复
引用
查看
2007-03-16 12:20 by
Rock Program
真是太帅了!
#3楼
回复
引用
2008-02-04 16:53 by
惠翔云[未注册用户]
有确比较帅,
简直是在Cool了
收藏了
谢谢了
#4楼
回复
引用
查看
2009-05-24 09:15 by
tony508
你那重复ID,换成CLASS是否会好点
注册用户登录后才能发表评论,请
登录
或
注册
。
IT新闻
:
·
知名扩展 Firebug 的简化版登陆 Chrome
·
Google 悄悄地启用 1e100.net,打枪地不要
·
从 Google 代码库找到的好东西
·
苹果在线商店临时关闭 或将推新Macbook
·
豆瓣网推出豆瓣电台iPhone客户端
每天10分钟,轻松学英语
专题:
iPad
jQuery
Windows 7
网站导航:
博客园首页
IT新闻
个人主页
闪存
程序员招聘
社区
博问
网摘
China-pub 计算机图书网上专卖店!6.5万品种2-8折!
China-Pub 计算机绝版图书按需印刷服务
在知识库中查看:
效果直逼flash的Div+Css+Js菜单
Powered by:
博客园
Copyright © Jason.Jiang
日历
<
2006年11月
>
日
一
二
三
四
五
六
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
公告
输入您的搜索字词
提交搜索表单
我的主页
个人资料
我的闪存
发短消息
搜索
常用链接
我的随笔
我的空间
我的短信
我的评论
更多链接
我的参与
我的新闻
最新评论
我的标签
我的标签
穷人 富人(1)
it(1)
垃圾短信(1)
艳照门(1)
手机病毒(1)
智能手机(1)
信息安全(1)
语义系统(1)
文件存储(1)
文件搜索(1)
更多
随笔分类
(84)
AJax(2)
DB2(1)
J2ME(2)
Mashup(1)
PHP(1)
Symbian(35)
VC(1)
Web2.0(1)
Web设计(1)
操作系统(1)
开发杂谈(7)
人生顿悟(7)
设计模式(2)
网络安全(11)
网络通信(8)
信号处理(1)
一些理论(2)
随笔档案
(99)
2008年6月 (2)
2008年5月 (3)
2008年4月 (1)
2008年3月 (8)
2008年2月 (7)
2008年1月 (1)
2007年12月 (2)
2007年10月 (2)
2007年4月 (1)
2007年2月 (1)
2007年1月 (2)
2006年12月 (7)
2006年11月 (55)
2006年10月 (1)
2006年9月 (6)
文章分类
(21)
.NET2.0(6)
AJax(1)
DataBase(3)
DesignPattern(2)
Security(2)
Symbian(6)
视频监控(1)
DotNet
QuitGame@本命年
自由、创新、研究、探索……
Symbian
海之蓝
Nokia S60资料搜集
网络资源
RFC文档
通信标准
信息安全
FreeXploiT
Kevins的天空
最新随笔
1. 强烈推荐一个Flash图标插件(free)
2. https
3. 阐明表和表空间的状态
4. 视频监控存储 定制化胜在优化与管理
5. 文件存储与搜索技术浅析
6. IBM touts complex math to help handle natural disasters
7. 八项重大科研装备自主创新项目,将令中国武器装备增色不少
8. 手机艳照门,在不久的将来会更猖獗
9. 谢文的一起网(yiqi.com)给我的一个想法:手机一起网(yiqi.cn)
10. 这辈子肯定去不了半人马座类地行星了,除非反物质技术突飞猛进
11. Google疯狂2008的面试题,看样子没有几个正常人能进Google!
12. 记住这俩个公司,如果上市肯定大赢
13. 中国长征五号,运力25吨,在2014年海南首发
14. 中国互联网有了自己的alexa:万瑞互联网数据平台
最新评论
1. Re:卡尔曼滤波简介+ 算法实现代码
如果有R语言编码的话就好,可以参考参考!!!
--Ryusuke
2. Re:从入门到精通,看了这篇文章,你离老黑的路就不远了
欲练神功,挥刀自宫 即便自宫,也是无功 黑客不是专门学出来的。
--airomyas
3. re: 效果直逼flash的Div+Css+Js菜单
你那重复ID,换成CLASS是否会好点
--tony508
4. re: 关于23种设计模式的有趣见解
是23种,不是32种
--匿名
5. re: 向网管们推荐一款好用的网管软件[Friendly Pinger]
目前我用过的,感觉最好的网络监控管理软件是同易监控管理软件。 他们网站是: 销售QQ 343222159 这个软件功能非常强,强烈推荐!我们公司总共管理120台电脑,分三个地方的分公司电脑一起...
--tonnysoft
阅读排行榜
1. 卡尔曼滤波简介+ 算法实现代码(14821)
2. 从入门到精通,看了这篇文章,你离老黑的路就不远了(11862)
3. NTLDR is missing 错误处理方法(8957)
4. TCP TIME_WAIT状态(6755)
5. 效果直逼flash的Div+Css+Js菜单(4999)
评论排行榜
1. 从入门到精通,看了这篇文章,你离老黑的路就不远了(19)
2. 基于.net开发平台项目案例集锦(14)
3. 70个AJAX应用的演示和源码下载(9)
4. NTLDR is missing 错误处理方法(9)
5. 上海复控华龙微系统技术有限公司,让我们记住这个公司的名字(7)