网管联盟
|
网管论坛
|
网管u家
|
网管博客
|
网管软件
|
网管求职
|
小游戏
|
网管搜索
|
网管原创
|
网管聚合
|
网管读摘
|
网管焦点
|
世界素材
|
会员投稿
|
会员中心
Windows
Linux
Cisco
网络技术
数据库
黑客攻防
DotNet
Java
PHP
认证
新闻资讯
服务器
存储资讯
网络设备
网管学堂
技术专题
焦点
网吧频道
当前位置: >
bitsCN.com
>
网管学堂
>
网页设计
>
Flash
>
制作技巧
> 效果直逼flash的Div+Css+Js菜单
效果直逼flash的Div+Css+Js菜单
2007-08-21 作者:bitsCN整理 来源:bitsCN.com
点评
投稿
收藏
代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>中国设计秀cnwebshow.com/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; 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>
网管下载dl.bitscn.com
0
顶一下
TAGs
:
菜单
效果
id
fbtndiv
fbtn_mask/divdiv
current
domove
上一篇:
让Flash动画适应任何分辨率的网页
下一篇:
教你如何去掉网页上的Flash动画虚线框
相关文章列表
关于XML在FLASH交互应用中的理解
flash中时间轴控制命令
flash中容易忽视的一个小地方
鼠标超链接上不停抖动的解决方法
Flash进度条的制作个人详细讲解组图
flash制作中涉及到的叠加问题
向网页中插入透明Flash的方法和技巧
巧妙去除Flash动画在线播放限制
效果直逼flash的Div+Css+Js菜单 评论:
评论加载中…
评论:
请自觉遵守互联网相关政策法规,评论不得超过250字。
验证码:
注册用户
本类热门排行:
1.
Flash进度条的制作个人详细讲解组图
2.
关于XML在FLASH交互应用中的理解
3.
向网页中插入透明Flash的方法和技巧
4.
flash制作中涉及到的叠加问题
5.
Flash场景中影片剪辑的修改小技巧
6.
flash中容易忽视的一个小地方
7.
flash中时间轴控制命令
8.
鼠标超链接上不停抖动的解决方法
9.
巧妙去除Flash动画在线播放限制
10.
让flash占满整个网页且flash总是居中
最新推荐文章:
1.
Flash AS简单测试图片所在的层次
2.
flash9.ocx 加载错误解决方法
3.
Flash动画制作过程概述及时间控制技巧
4.
用Flash按钮弹出窗口
5.
在Flash中调用Html的层
6.
Cool 3d与Flash联袂打造三维片头
7.
绘画技巧:Flash绘制人头造型
8.
在FLASH中实现Tooltip功能
9.
flash与后台数据交换方法整理续
10.
谈谈新浪网体育新闻中的SWF用法
网管论坛交流:
·
不疯魔不成活
·
令你大开眼界的真正标准化机房,已整理重
·
华为HCSE OSPF路由协议培训教材 V3.0
·
为赈灾,女孩舍身拍“裸照”
·
Windows Server 2003服务器群集创建和配
·
exchange2k3全套官方资料
·
双儿一周岁了。。。特殊的礼物来啦。。
·
存储备份技术版块守则
·
无盘技术交流区守则
·
DOS命令基础大全之命令详解<作者吐血