***页面导航***多级滚动菜单(cool)
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要三个步骤
第一步：把如下代码加入到<head>区域中
<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>
第二步：把如下代码加入到<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>
<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:hand" 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:hand" 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>
第三步：把“onmousemove="move()" onload=bodyload()”加在<body>标记里
例如：<body onmousemove="move()" onload=bodyload()>
------- - ------------- ---- -------------
ht tp://www. huoyue.com.cn 活跃网，活跃人群的论坛，访问活 跃网， 将给您带来意想不到的 收获，还可以免费为您开论坛，让您免费拥有与朋 友、网友交流的论坛。 你是 年轻人吗？你活跃你就上！
页:
[1]