博客园丁
我是博客园的一丁,我会永不停顿,不停创新。
posts - 99, comments - 119, trackbacks - 21, articles - 22
::
首页
::
新随笔
::
联系
::
订阅
::
管理
效果直逼flash的Div+Css+Js菜单
Posted on 2006-11-05 15:20
Jason.Jiang
阅读(4232)
评论(3)
编辑
收藏
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了
收藏了
谢谢了
新用户注册
刷新评论列表
标题
姓名
主页
Email
(博主才能看到)
验证码
*
看不清,换一张
[
登录
][
注册
]
内容(请不要发表任何与政治相关的内容)
网站首页
新闻频道
社区
小组
博问
网摘
闪存
找找看
Remember Me?
登录
使用高级评论
新用户注册
返回页首
恢复上次提交
[使用Ctrl+Enter键可以直接提交]
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索
相关文章:
如何制作FLASH下拉菜单
转载(效果直逼flash的Div+Css+Js菜单)
相关链接:
最新IT新闻:
微软首次打破先例 Windows 7不再改名
亚马逊EC2云计算计划支持Windows操作系统
鲍尔默失望变希望 幸亏当初未收购雅虎
微软12月举办硬件工程大会 Windows7将首次亮相
电脑程序与12位真人聊天 “艾尔博特”骗过3人
Powered by:
博客园
Copyright © Jason.Jiang
日历
<
2008年2月
>
日
一
二
三
四
五
六
27
28
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
1
2
3
4
5
6
7
8
公告
输入您的搜索字词
提交搜索表单
与我互动
给我发短消息
搜索
常用链接
我的随笔
我的空间
我的短信
我的评论
更多链接
我的参与
我的新闻
最新评论
我的标签
留言簿
(23)
给我留言
查看私人留言
我的标签
穷人 富人(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:万瑞互联网数据平台
15. 科来网络分析软件-网管员的助手
16. 上海复控华龙微系统技术有限公司,让我们记住这个公司的名字
17. 什么是U和服务器托管
18. 向网管们推荐一款好用的网管软件[Friendly Pinger]
19. IT人士35岁之前“职业转型”的四大选择【转贴】
20. 我的2007,酸甜苦辣咸。
21. 12条标准决定你是富是穷!
22. 今天,2008年1月15日,阴历2007年12月8日(腊八),我们登记结婚了!
23. Mashup资源 来自IBM Developer
24. [备忘]明天去中移动需要准备的东西!
25. 六度空间理论
26. 从现在开始好好研究J2ME了
27. 打印预览中工具栏的定制问题
28. NTLDR is missing 错误处理方法
29. [转]C语言变量的一些认识
30. 卡尔曼滤波简介+ 算法实现代码
31. [Symbian项目进展]怎样在S60指示面板上画图标,原代码+示意图
32. [Symbian项目进展]如何实现手机中应用程序的开机自启动,附源代码
33. [转]清除变种免杀灰鸽
34. [转]威金(Viking)终极应对方法
35. [原创]虚拟与现实适当结合的社区发展模式(一)
36. [Symbian项目进展]防火墙日志模块的开发,附关键代码
37. [Symbian项目进展]网络流量曲线图,代码+效果图
38. 70个AJAX应用的演示和源码下载
39. 未来的web2.0社交体验
40. Getting started with ASP.NET AJAX in Visual Web Developer
最新评论
1. re: symbian-使用libmad播放mp3
楼主能把源代码给我发一份吗?谢谢~~~
我邮件:mahaoyun@neusoft.com
--mahaoyun
2. re: symbian-使用libmad播放mp3
博主,把源代码发一份给我好吗?
我现在找不到CAudio3Engine这个类的源码,不知道这个类怎么用的,博主帮下忙好吗?
--逍遥_散人
阅读排行榜
1. 从入门到精通,看了这篇文章,你离老黑的路就不远了(11170)
2. 卡尔曼滤波简介+ 算法实现代码(9559)
3. NTLDR is missing 错误处理方法(8013)
4. ASP.NET2.0 GridView小技巧汇粹 (4413)
5. 效果直逼flash的Div+Css+Js菜单(4232)
评论排行榜
1. 从入门到精通,看了这篇文章,你离老黑的路就不远了(18)
2. 基于.net开发平台项目案例集锦(14)
3. 70个AJAX应用的演示和源码下载(9)
4. NTLDR is missing 错误处理方法(9)
5. 上海复控华龙微系统技术有限公司,让我们记住这个公司的名字(7)