一个很cool的网站导航栏

由 发表于 ┊2,061 PV

刚在网上看到一个很不错的网站导航栏效果，富有动态感，摘下来收藏先～

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
<!--样式表部分-->
<style type=text/css>
.menu td{font-size:12px;color:white;font-weight:bold;background:#336699;border:1px solid #336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center}
 </style>
<!--脚本定义部分-->
<script language=javascript type=text/javascript>
function showFilter(obj){
var tds=obj.getElementsByTagName("td");
for(var i=0;i </p>
<tds.length;i++){
with(tds[i]){
 onmouseover=function(){
 with(this){
 filters[0].apply();
 style.color=\'black\';
 style.border=\'1px solid white\';
 style.background=\'#66CCFF\';
 filters[0].play();
 }
 }
 onmouseout=function(){
 with(this){
 filters[0].apply();
 style.color=\'white\';
 style.border=\'1px solid #336699\';
 style.background=\'#336699\';
 filters[0].play();
 }
 }
}
}
}
</script>
<!--BODY部分-->
<body>
<table cellspacing=4 cellpadding=1 bgColor=#336699 border=0 class=menu width=100 id=xmenu>
<tr>
<td>例子一</td>
</tr>
<tr>
<td>例子二</td>
</tr>
<tr>
<td>例子三</td>
</tr>
<tr>
<td>例子四</td>
</tr>
<tr>
<td>例子五</td>
</tr>
<tr>
<td>例子六</td>
</tr>
</table>
</body>
<script>showFilter(xmenu); //里面就的xmenu就是表格的ID号此函数可到处调用</script>