|
说明: 多级滚动菜单(cool)
效果: 运行后查看！
代码: 要完成此效果需要三个步骤
第一步：把如下代码加入到<head>区域中。
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第二步：把如下代码加入到<body>区域中。
<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:hand" 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>
|
