一款特效菜单源代码

Joseffu · 发表于 2003-01-30 14:05:07

[html]<html>
<head><title>多级滑动菜单</title>
<style>
body,td,a {;font-size:9pt;color:black;text-decoration:none};
.normal {;padding:2px};
.up {;padding:1px;border:#999999 1px solid;background:#cccccc};
.down {;padding:1px;border:dbdbdb 1px solid;background:dbdbdb};
.menuv {;filter: revealTrans(transition=23,duration=0.5);padding:2px};
</style>
</head>
<body onmousemove="move()" onload=bodyload()>
<script>
//闪烁的表格边框
function flashit(){;if(!document.all)return;if (td123.style.borderColor=="black")td123.style.borderColor="#999999";else td123.style.borderColor="black"};setInterval("flashit()",500)
//渐入的效果,改变alpha值
function high(image){;theobject=image,highlighting=setInterval("highlightit(theobject)",100)};function low(image){;clearInterval(highlighting),image.filters.alpha.opacity=50};function highlightit(cur2){;if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=20;else if(window.highlighting)clearInterval (highlighting)};
//拖动层的js
var over=false,down=false,divleft,divtop;function move(){;if(down){;plane.style.left=event.clientX-divleft;plane.style.top=event.clientY-divtop;};};
//滑动层
function bodyload()
{;
if(plane.style.pixelTop!=0)
{;
plane.style.pixelTop-=10
setTimeout('bodyload()',1)
};
};
//渐变显示层
function Show(divid) {;
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
};
function Hide(divid) {;
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
};
</script>
<div style="position:absolute;z-index:1;width:1;height:1; left: 0; top: 500" ID=plane onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)" onmouseup="down=false">
　<table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor

nd" cellpadding="0" bgcolor="f4f4f4">
<tr>
<td bgcolor="#cccccc" height="20" style="BORDER:#999999 1px solid;cursor:move">
<div align="center">多级滑动菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this),Show(menu1)
" onmouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'" >
<div align="right">有下级菜单>></div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this),Show(menu2)" onmouseOut="this.className='normal',low(this),menu2.style.visibility='hidden'" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'" >
<div align="right">有下级菜单>></div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align="right">无下级菜单>></div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align="right">无下级菜单>></div>
</td>
</tr>
</table>
<div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width: 105"
onmouseOver=this.style.visibility='visible'
onmouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor

nd" cellpadding="0" bgcolor="f4f4f4" align="right">
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align="center">子菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
</table>
</div>
<div id="menu2" style="position:absolute;top:45px;left:96; z-index:1; visibility: hidden; width: 105"
onmouseOver=this.style.visibility='visible'
onmouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor

nd" cellpadding="0" bgcolor="f4f4f4" align="right">
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align="center">子菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
<tr>
<td class=normal onmouseDown="this.className='down'"
onmouseOver="this.className='up',high(this)" onmouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onmouseUp="this.className='up'">
<div align=center>子菜单</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>[/html]
看看效果~~~：）

账号		自动登录	找回密码
密码			注册