014

说明：	页面左侧的导航条，变化效果很酷，也非常实用，酷
状态:
代码：	脚本说明: 把如下代码加入<body>区域中 <style type="text/css"> <!-- a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana} //--> </style> <script language="JavaScript"> <!-- var top=50; var left=0; var bordercolor="#000000"; var bgcolorLight="#EFEFEF"; var bgcolorDark="#DFDFDF"; um1 = new Array("Menu1", "Link1_um1", "http:///", "Link2_um1", "http:///", "Link3_um1", "http:///", "Link4_um1", "http:///", "Link5_um1", "http:///", "Link6_um1", "http:///") um2 = new Array("Menu2", "Link1_um2", "http:///", "Link2_um2", "http:///", "Link3_um2", "http:///", "Link4_um2", "http:///") um3 = new Array("Menu3", "Link1_um3", "http:///", "Link2_um3", "http:///", "Link3_um3", "http:///", "Link4_um3", "http:///", "Link5_um3", "http:///", "Link6_um3", "http:///", "Link7_um3", "http:///", "Link8_um3", "http:///", "Link9_um3", "http:///", "Link10_um3", "http:///", "Link11_um3", "http:///", "Link12_um3", "http:///", "Link13_um3", "http:///", "Link14_um3", "http:///", "Link15_um3", "http:///") //--> </script> <script language="JavaScript"> <!-- function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0; this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.mac=(this.ver.indexOf('Mac') > -1) ?1:0; this.ope=(navigator.userAgent.indexOf('Opera')>-1); this.ie=(this.ie6 \|\| this.ie5 \|\| this.ie4) this.ns=(this.ns4 \|\| this.ns5) this.bw=(this.ie6 \|\| this.ie5 \|\| this.ie4 \|\| this.ns5 \|\| this.ns4 \|\| this.mac \|\| this.ope) this.nbw=(!this.bw) return this} bw=new checkBrowser() var um1length = ((um1.length-1)/2); var um2length = ((um2.length-1)/2); var um3length = ((um3.length-1)/2); var um1nr = 0; var um1nr2 = 1; var um1nr3 = 2; var um2nr = 0; var um2nr2 = 1; var um2nr3 = 2; var um3nr = 0; var um3nr2 = 1; var um3nr3 = 2; init(); function init() { if(bw.ie6 \|\| bw.ie4 \|\| bw.ie5){ height=document.body.offsetHeight-4; document.write('<div id="menubg" style="position:absolute;top:0;left:'+left+';background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;height:'+height+';border-top-width:0px">') document.write('</div>') document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m1_ie()">'+um1[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um1" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">'); } else if(bw.ns4){ height=innerHeight; document.write('<layer id="menubg" position="absolute" top="0" left="'+left+'" bgcolor="'+bordercolor+'" width="127" height="'+(height)+'">') document.write('</layer>') document.write('<layer id="menubg2" position="absolute" top="0" left="'+(left+1)+'" bgcolor="'+bgcolorLight+'" width="125" height="'+(height-1)+'">') document.write('</layer>') document.write('<layer id="m" position="absolute" top="50" left="'+(left+1)+'">') document.write('<layer bgcolor="'+bordercolor+'" width="125">') document.write('<table align="center">') document.write('<tr><td align="center"></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m1_n()">'+um1[0]+'</a></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">') document.write('<table align="center">') document.write('<tr><td align="center"></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer id="um1" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">') document.write('<table align="center">') } else if(bw.ns5){ height=innerHeight-1; document.write('<div id="menubg" style="position:absolute;top:0;left:'+left+';background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;height:'+height+';border-top-width:0px">') document.write('</div>') document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m1_n6()">'+um1[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um1" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } else{ height=document.body.offsetHeight-4; document.write('<div id="menubg" style="position:absolute;top:0;left:'+left+';background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;height:'+height+';border-top-width:0px">') document.write('</div>') document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="#">'+um1[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um1" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } init2(); } function init2() { if(um1nr < um1length){ document.write('<tr><td align="center"><a href="'+um1[um1nr3]+'">'+um1[um1nr2]+'</a></td></tr>'); um1nr++; um1nr2=um1nr2+2; um1nr3=um1nr3+2; init2(); } else{ init3(); } } function init3() { if(bw.ie6 \|\| bw.ie4 \|\| bw.ie5){ document.write('</table>') document.write('</div>') document.write('<div id="m1" style="position:absolute;top:20;left:0">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m2_ie()">'+um2[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um2" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } else if(bw.ns4){ document.write('</table>') document.write('</layer>') document.write('<layer id="m1" position="absolute" top="21" left="0">') document.write('<layer bgcolor="'+bordercolor+'" width="125">') document.write('<table align="center">') document.write('<tr><td align="center"></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m2_n()">'+um2[0]+'</a></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">') document.write('<table align="center">') document.write('<tr><td align="center"></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer id="um2" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">') document.write('<table align="center">') } else if(bw.ns5){ document.write('</table>') document.write('</div>') document.write('<div id="m1" style="position:absolute;top:18;left:0">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m2_n6()">'+um2[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um2" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } else{ document.write('</table>') document.write('</div>') document.write('<div id="m1" style="position:absolute;top:'+((um1.length-1)/217.5+20)+';left:0">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="#">'+um2[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um2" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } init4(); } function init4() { if(um2nr < um2length){ document.write('<tr><td align="center"><a href="'+um2[um2nr3]+'">'+um2[um2nr2]+'</a></td></tr>'); um2nr++; um2nr2=um2nr2+2; um2nr3=um2nr3+2; init4(); } else{ init5(); } } function init5() { if(bw.ie6 \|\| bw.ie4 \|\| bw.ie5){ document.write('</table>') document.write('</div>') document.write('<div id="m2" style="position:absolute;top:20;left:0">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m3_ie()">'+um3[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um3" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } else if(bw.ns4){ document.write('</table>') document.write('</layer>') document.write('<layer id="m2" position="absolute" top="21" left="0">') document.write('<layer bgcolor="'+bordercolor+'" width="125">') document.write('<table align="center">') document.write('<tr><td align="center"></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m3_n()">'+um3[0]+'</a></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">') document.write('<table align="center">') document.write('<tr><td align="center"></td></tr>') document.write('</table>') document.write('</layer>') document.write('<layer id="um3" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">') document.write('<table align="center">') } else if(bw.ns5){ document.write('<tr><td align="center"><a href="'+um1[24]+'">'+um1[23]+'</a></td></tr>'); document.write('</table>') document.write('</div>') document.write('<div id="m1" style="position:absolute;top:18;left:0">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="javascript:do_m2_n6()">'+um2[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um2" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } else{ document.write('</table>') document.write('</div>') document.write('<div id="m2" style="position:absolute;top:'+((um2.length-1)/217.5+20)+';left:0">') document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">') document.write('<table align="center">') document.write('<tr><td align="center"><a href="#">'+um3[0]+'</a></td></tr>') document.write('</table>') document.write('</div>') document.write('<div id="um3" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">') document.write('<table align="center">') } init6(); } function init6() { if(um3nr < um3length){ document.write('<tr><td align="center"><a href="'+um3[um3nr3]+'">'+um3[um3nr2]+'</a></td></tr>'); um3nr++; um3nr2=um3nr2+2; um3nr3=um3nr3+2; init6(); } else{ init7(); } } function init7() { if(bw.ie6 \|\| bw.ie5 \|\| bw.ie4){ document.write('</table>') document.write('</div>') document.write('<div id="m3" style="height:'+((um3.length-1)/217.5+20+5)+';position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">') document.write('</div></div></div></div>') } else if(bw.ns4){ document.write('</table>') document.write('</layer>') document.write('<layer id="m3" position="absolute" top="21" left="0" width="125" height="'+((um3.length-1)/220+20)+'" bgcolor="'+bgcolorLight+'">') document.write('<layer bgcolor="'+bordercolor+'" width="125" height="1">') document.write('</table></layer></table></layer></layer></layer></layer></layer>') } else if(bw.ns5){ document.write('</table>') document.write('</div>') document.write('<div id="m3" style="height:'+((um3.length-1)/217.5+20+5)+';position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">') document.write('</div></div></div></div>') } else{ document.write('</table>') document.write('</div>') document.write('<div id="m3" style="height:2;position:absolute;top:'+((um3.length-1)/217.5+20+5)+';left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">') document.write('</div></div></div></div>') } } var m1pos_ie=20, m1jump_ie=-5; var m2pos_ie=20, m2jump_ie=-5; var m3pos_ie=20, m3jump_ie=-5; var m1pos_n6=18, m1jump_n6=-6; var m2pos_n6=18, m2jump_n6=-6; var m3pos_n6=18, m3jump_n6=-6; var m1pos_n=21, m1jump_n=-5; var m2pos_n=21, m2jump_n=-5; var m3pos_n=21, m3jump_n=-5; var time=5; function do_m1_ie() { if(m2pos_ie>0) { m2jump_ie=-5; if(m2pos_ie>=(um2.length-1)/217.5+20) m2_move_ie(); } if(m3pos_ie>0) { m3jump_ie=-5; if(m3pos_ie>=(um3.length-1)/217.5+20) m3_move_ie(); } m1jump_ie=-m1jump_ie; if(m1pos_ie<=20 \|\| m1pos_ie>=(um1.length-1)/217.5+20) m1_move_ie(); } function m1_move_ie(witch) { document.all.m1.style.top=m1pos_ie; m1pos_ie+=m1jump_ie; if(m1pos_ie>15 && m1pos_ie<(um1.length-1)/217.5+20+5) setTimeout("m1_move_ie()", time); } function do_m2_ie() { if(m1pos_ie>0) { m1jump_ie=-5; if(m1pos_ie>=(um1.length-1)/217.5+20) m1_move_ie(); } if(m3pos_ie>0) { m3jump_ie=-5; if(m3pos_ie>=(um3.length-1)/217.5+20) m3_move_ie(); } m2jump_ie=-m2jump_ie; if(m2pos_ie<=20 \|\| m2pos_ie>=(um2.length-1)/217.5+20) m2_move_ie(); } function m2_move_ie() { document.all.m2.style.top=m2pos_ie; m2pos_ie+=m2jump_ie; if(m2pos_ie>15 && m2pos_ie<(um2.length-1)/217.5+20+5) setTimeout("m2_move_ie()", time); } function do_m3_ie() { if(m2pos_ie>0) { m2jump_ie=-5; if(m2pos_ie>=(um2.length-1)/217.5+20) m2_move_ie(); } if(m1pos_ie>0) { m1jump_ie=-5; if(m1pos_ie>=(um1.length-1)/217.5+20) m1_move_ie(); } m3jump_ie=-m3jump_ie; if(m3pos_ie<=20 \|\| m3pos_ie>=(um3.length-1)/217.5+20) m3_move_ie(); } function m3_move_ie() { document.all.m3.style.top=m3pos_ie; m3pos_ie+=m3jump_ie; if(m3pos_ie>15 && m3pos_ie<(um3.length-1)/217.5+20+5) setTimeout("m3_move_ie()", time); } function do_m1_n() { if(m2pos_n>0) { m2jump_n=-5; if(m2pos_n>=(um2.length-1)/220+20) m2_move_n(); } if(m3pos_n>0) { m3jump_n=-5; if(m3pos_n>=(um3.length-1)/220+20) m3_move_n(); } m1jump_n=-m1jump_n; if(m1pos_n<=21 \|\| m1pos_n>=(um1.length-1)/220+20) m1_move_n(); } function m1_move_n() { document.m.document.m1.top=m1pos_n; m1pos_n+=m1jump_n; if(m1pos_n>=20 && m1pos_n<(um1.length-1)/220+20) setTimeout("m1_move_n()", time); } function do_m2_n() { if(m1pos_n>0) { m1jump_n=-5; if(m1pos_n>=(um1.length-1)/220+20) m1_move_n(); } if(m3pos_n>0) { m3jump_n=-5; if(m3pos_n>=(um3.length-1)/220+20) m3_move_n(); } m2jump_n=-m2jump_n; if(m2pos_n<=21 \|\| m2pos_n>=(um2.length-1)/220+20) m2_move_n(); } function m2_move_n() { document.m.document.m1.document.m2.top=m2pos_n; m2pos_n+=m2jump_n; if(m2pos_n>20 && m2pos_n<(um2.length-1)/220+20) setTimeout("m2_move_n()", time); } function do_m3_n() { if(m2pos_n>0) { m2jump_n=-5; if(m2pos_n>=(um2.length-1)/220+20) m2_move_n(); } if(m1pos_n>0) { m1jump_n=-5; if(m1pos_n>=(um1.length-1)/220+20) m1_move_n(); } m3jump_n=-m3jump_n; if(m3pos_n<=21 \|\| m3pos_n>=(um3.length-1)/220+20) m3_move_n(); } function m3_move_n() { document.m.document.m1.document.m2.document.m3.top=m3pos_n; m3pos_n+=m3jump_n; if(m3pos_n>20 && m3pos_n<(um3.length-1)/220+20) setTimeout("m3_move_n()", time); } function do_m1_n6() { if(m2pos_n6>0) { m2jump_n6=-6; if(m2pos_n6>=(um2.length-1)/217.5+20) m2_move_n6(); } if(m3pos_n6>0) { m3jump_n6=-6; if(m3pos_n6>=(um3.length-1)/217.5+20) m3_move_n6(); } m1jump_n6=-m1jump_n6; if(m1pos_n6<=18 \|\| m1pos_n6>=(um1.length-1)/217.5+20) m1_move_n6(); } function m1_move_n6() { document.getElementById('m1').style.top=m1pos_n6; m1pos_n6+=m1jump_n6; if(m1pos_n6>15 && m1pos_n6<(um1.length-1)/217.5+20+5) setTimeout("m1_move_n6()", time); } function do_m2_n6() { if(m1pos_n6>0) { m1jump_n6=-6; if(m1pos_n6>=(um1.length-1)/217.5+20) m1_move_n6(); } if(m3pos_n6>0) { m3jump_n6=-6; if(m3pos_n6>=(um3.length-1)/217.5+20) m3_move_n6(); } m2jump_n6=-m2jump_n6; if(m2pos_n6<=18 \|\| m2pos_n6>=(um2.length-1)/217.5+20) m2_move_n6(); } function m2_move_n6() { document.getElementById('m2').style.top=m2pos_n6; m2pos_n6+=m2jump_n6; if(m2pos_n6>15 && m2pos_n6<(um2.length-1)/217.5+20+5) setTimeout("m2_move_n6()", time); } function do_m3_n6() { if(m2pos_n6>0) { m2jump_n6=-6; if(m2pos_n6>=(um2.length-1)/217.5+20) m2_move_n6(); } if(m1pos_n6>0) { m1jump_n6=-6; if(m1pos_n6>=(um1.length-1)/217.5+20) m1_move_n6(); } m3jump_n6=-m3jump_n6; if(m3pos_n6<=18 \|\| m3pos_n6>=(um3.length-1)/217.5+20) m3_move_n6(); } function m3_move_n6() { document.getElementById('m3').style.top=m3pos_n6; m3pos_n6+=m3jump_n6; if(m3pos_n6>15 && m3pos_n6<(um3.length-1)/217.5+20+5) setTimeout("m3_move_n6()", time); } //--> </script>