博客园丁
我是博客园的一丁,我会永不停顿,不停创新。
posts - 100, comments - 129, trackbacks - 21, articles - 23
::
首页
::
新随笔
::
联系
::
订阅
::
管理
效果直逼flash的Div+Css+Js菜单
Posted on 2006-11-05 15:20
Jason.Jiang
阅读(5504)
评论(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 全部选择 提示:你可先修改部分代码,再按运行]
绿色通道:
好文要顶
关注我
收藏该文
与我联系
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新闻
:
·
《纽约时报》:富士康问题犯错不只苹果
·
传微软拟新开4家专卖店 首家海外店今年开张
·
亚马逊否认近期将推出独立视频服务
·
微软高管称企业用户升级Windows 8应先更新Windows 7
·
分析师称苹果三星上季度占据手机市场95%利润
»
更多新闻...
最新知识库文章
:
·
高级编程语言的发展历程
·
如何学习一门新的编程语言?
·
学习不同编程语言的重要性
·
为什么我喜欢富于表达性的编程语言
·
计算机专业的女生为什么要学编程
»
更多知识库文章...
China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务
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
公告
输入您的搜索字词
提交搜索表单
昵称:
Jason.Jiang
园龄:
5年7个月
粉丝:
3
关注:
0
搜索
常用链接
我的随笔
我的评论
我的参与
最新评论
我的标签
更多链接
最新随笔
1. ORACLE误删数据的恢复
2. 强烈推荐一个Flash图标插件(free)
3. https
4. 阐明表和表空间的状态
5. 视频监控存储 定制化胜在优化与管理
6. 文件存储与搜索技术浅析
7. IBM touts complex math to help handle natural disasters
8. 八项重大科研装备自主创新项目,将令中国武器装备增色不少
9. 手机艳照门,在不久的将来会更猖獗
10. 谢文的一起网(yiqi.com)给我的一个想法:手机一起网(yiqi.cn)
我的标签
穷人 富人(1)
it(1)
垃圾短信(1)
艳照门(1)
手机病毒(1)
智能手机(1)
信息安全(1)
语义系统(1)
文件存储(1)
文件搜索(1)
更多
随笔分类
(85)
AJax(2)
DB2(1)
J2ME(2)
Mashup(1)
Oracle(1)
PHP(1)
Symbian(35)
VC(1)
Web2.0(1)
Web设计(1)
操作系统(1)
开发杂谈(7)
人生顿悟(7)
设计模式(2)
网络安全(11)
网络通信(8)
信号处理(1)
一些理论(2)
随笔档案
(100)
2011年2月 (1)
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的天空
最新评论
阅读排行榜
评论排行榜
推荐排行榜