Dhtml:超级酷的动感折叠菜单,类似Flash

1<style type="text/css">   
2<!--   
3.t { filter: Alpha(Opacity=50)}   
4td { font-size: 12px; line-height: 22px}   
5a:link { color: #FFFFFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}   
6a:visited { color: #FFFFFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}   
7a:hover { background-color: #FF66FF; height: 20px; width: 61px; border: #FFFFFF; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}   
8\-->   
9</style>
 1<script language="JavaScript">   
 2function MM_findObj(n, d) { //v4.01   
 3var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {   
 4d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}   
 5if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];   
 6for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);   
 7if(!x && d.getElementById) x=d.getElementById(n); return x;   
 8}   
 9function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII   
10var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);   
11var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';   
12if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}   
13if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}   
14var xx=(parseInt(d.left))?parseInt(d.left):0;   
15var yy=(parseInt(d.top))?parseInt(d.top):0;   
16if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}   
17else if (c==2) {m=false;clearTimeout(g.p7Magic);}   
18else {var i=parseInt(a);   
19if (eval(g.moved)){clearTimeout(g.p7Magic);}   
20if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}   
21if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}   
22if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}   
23if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}   
24if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){   
25xx+="px";yy+="px";}   
26d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');   
27}else {g.moved=false;}   
28}   
29</script>
 1<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1">
 2<div class="t" id="Layer2" style="position:absolute; left:264px; top:59px; width:67px; height:52px; z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible">
 3<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
 4<tr>
 5<td align="center" valign="top"><font color="#FFFFFF" onmouseout="P7AniMagic('Layer2',264,59,5,30,0,0)" onmouseover="P7AniMagic('Layer2',210,35,5,30,0,0)">on   
 61<br/>
 7<a href="#;">第一项</a><br/>
 8<a href="#;">第二项</a><br/>
 9<a href="#;">第三项</a><br/>
10</font></td>
11</tr>
12</table>
13</div>
14<div class="t" id="Layer3" style="position:absolute; left:264px; top:81px; width:66px; height:84px; z-index:3; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; visibility: visible">
15<table border="0" cellpadding="0" cellspacing="0" width="100%">
16<tr>
17<td>
18<div align="center"><font color="#FFFFFF" onmouseout="P7AniMagic('Layer3',264,81,5,30,0,0)" onmouseover="P7AniMagic('Layer3',210,55,5,30,0,0)">on 2<br/>
19<a href="#;">第一项</a><br/>
20<a href="#;">第二项</a><br/>
21<a href="#;">第三项</a><br/>
22</font></div>
23</td>
24</tr>
25</table>
26</div>
27<div class="t" id="Layer4" style="position:absolute; width:68px; height:80px; z-index:4; left: 264px; top: 102px; background-color: #0064FF; layer-background-color: #0064FF; border: 1px none #000000; visibility: visible">
28<table border="0" cellpadding="0" cellspacing="0" width="100%">
29<tr>
30<td>
31<div align="center"><font color="#FFFFFF" onmouseout="P7AniMagic('Layer4',264,102,5,30,0,0)" onmouseover="P7AniMagic('Layer4',210,75,5,30,0,0)">on 3<br/>
32<a href="#;">第一项</a><br/>
33<a href="#;">第二项</a><br/>
34<a href="#;">第三项</a><br/>
35</font></div>
36</td>
37</tr>
38</table>
39</div> <div id="Layer5" style="position:absolute; width:65px; height:127px; z-index:5; left: 265px; top: 56px">
40<table border="0" cellpadding="0" cellspacing="0" height="72" width="100%">
41<tr>
42<td height="24" onmouseout="P7AniMagic('Layer2',264,59,5,30,0,0)" onmouseover="P7AniMagic('Layer2',210,35,5,30,0,0)"> </td>
43</tr>
44<tr>
45<td height="24" onmouseout="P7AniMagic('Layer3',264,81,5,30,0,0)" onmouseover="P7AniMagic('Layer3',210,55,5,30,0,0)"> </td>
46</tr>
47<tr>
48<td height="24" onmouseout="P7AniMagic('Layer4',264,102,5,30,0,0)" onmouseover="P7AniMagic('Layer4',210,75,5,30,0,0)"> </td>
49</tr>
50</table>
51</div>
52</div>
Published At
Categories with 网页设计
comments powered by Disqus