注册 登录
编程论坛 → JavaScript论坛

[转载]效果直逼flash的Div+Css+Js菜单

盖茨他爹 发布于 2006-06-10 22:33， 20586 次点击
<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:9px;
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>

[此贴子已经被作者于2006-6-10 22:35:22编辑过]

67 回复
#2
盖茨他爹2006-06-10 22:36

老夫活了大半辈子，头一次见这么NB的JS特效
#3
小星2006-06-10 22:39
很少见
一般会直接用flash实现，学习了阿
#4
google2006-06-10 22:41
不错
#5
dreame2006-06-11 22:40
开眼界
#6
千里冰封2006-06-12 11:39
相当不错 ,很好
#7
okwxj2006-07-07 23:44
见识了``
#8
zxxlg2052006-07-15 11:45
我也算是开眼界了
#9
ybzjllj2006-07-17 20:58
酷得不得了
#10
chaojimali2006-07-19 15:45
很好啊 学习了
#11
小悟空2006-07-19 20:01
NB啊~~~!!!
#12
dv99812006-07-27 22:02

真的是太NB了啊。。。。晕
#13
hangxj2006-07-28 16:22
何止是一个N字了得?
那应该就是太N了~`
#14
mako2006-08-05 12:32
ＤＮＢ
#15
pulf2006-08-07 21:06
我也来学习一下。
#16
可可℃乐2006-08-09 13:21
俺...俺...俺都不说拉 简直不敢相信。
终于体会到JS的强大拉
#17
guixiaolan2006-08-13 09:13

靠，N！
#18
angeldidi2006-08-29 11:48

cool!
不过有没有人可以帮忙解释一下这些代码？
#19
huazisoft2006-09-04 17:57
楼主NB!!!  
#20
summoner2006-10-20 16:44
一个字，酷！
#21
pchelp20082006-10-21 09:03
牛
#22
〖←冷似雪2006-11-03 11:05
厉害,I服了YOU
#23
tianykun2006-11-15 11:13

NB
#24
zjlandhmj2006-11-18 13:14
真是太棒了啊！
#25
czwlucky2006-11-25 23:09
真的太棒了！我要好好学习一下...
#26
在编程中沦落2006-12-06 15:42
真的是高人，长见识了…………
#27
jefyu2006-12-11 20:06
学习学习，太爽了
#28
hsjljh2006-12-20 22:07
d的确牛鼻啊
#29
lijunlenly2007-03-31 00:56
很不错，收藏了#24
#30
hsjljh2007-04-05 10:27
#31
loki2007-04-14 22:28
ｈｏｈｏ
我喜欢
#32
IPV62007-04-19 16:31

哇噢，酷
#33
球球2007-04-19 23:36
TNB 太牛逼
收藏了.
#34
smyh2007-05-16 08:52

在FF里面不可以正常使用啊？？在IE里到可以用
#35
herry2007-06-09 19:41
开眼了！
#36
yndkai2007-06-09 20:11
相当的佩服
#37
汤姆猫2007-06-15 08:56
JS太强大了　　要不停的学习
#38
YSKING2007-06-16 12:10
......
#39
kkynietg2007-06-21 11:23
添加个直接看效果的

[CODE]
<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:9px;
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>
[/CODE]
#40
kkynietg2007-06-21 11:24
看了以后觉得这个效果 真的真的很不错啊！！
#41
lyshyhuangli2007-08-01 18:29
回复：（盖茨他爹）[转载]效果直逼flash的Div+Css+Js菜...
nb
#42
l32948322007-08-02 13:44
太神奇了
请问javascript怎么学啊
我还不会呢。。。。
#43
yfcomeon2007-08-02 16:26

确实很nb
#44
pucb2007-08-03 21:19


看了受不了...
#45
hehe3652007-08-04 15:14
这个东西放到一个页,很好,可引用到别的页,就变成好几个层了.怎么处理了
#46
wengli422007-08-08 15:57
NNB啊
见识了一下
#47
fqbnet20082007-09-12 09:59
我顶你个肺！！！
#48
l32948322007-09-15 18:59

太cool了 收藏!!!
#49
jaychou2007-09-19 09:34
不错
#50
bomb_20022007-10-01 01:22
不错，也可以看一下prototype.js和scriptaculous.js的组合实现的菜单
#51
风之使者2007-10-02 14:44
这样都行学到了
12
©2025, BC-CN.NET
电脑版