记录Harde学习成长生活的点点滴滴.
« »
2008-07-31
计算机

92 次浏览

一个效果直逼Flash的DIV+CSS+JS导航【转载】

?View Code HTML4STRICT
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!--
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%;
}
--></code></div>
<code>
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>G1</div>
 
<div>good morning</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>G2</div>
 
<div>good evening</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>M1</div>
 
<div>my name is fireyy</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>M2</div>
 
<div>mm mm i love u</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>G1</div>
 
<div>good morning</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>G2</div>
 
<div>good evening</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>M1</div>
 
<div>my name is fireyy</div>
 
 
 
 
 
<div id="fbtn"> </div>
<div id="fbtn_txt">
<div>M2</div>
 
<div>mm mm i love u</div>
 
 
 
 
<script type="text/javascript"><!--
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&#038;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>

日志信息 »

该日志于2008-07-31 20:53由 harde 发表在计算机分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

没有评论

发表评论 »

使用新浪微博登陆

返回顶部
分享按钮