|
|
| 同Flash媲美的导航菜单 |
| 整理：Cnwshow.Com 来源：Internet 整理时间：2008-5-30 |
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同Flash媲美的导航菜单</title>
<SCRIPT>
<!--此处为点击第二个按钮后滑出子菜单所需的代码-->
function subClose1(){
if(sub2.style.pixelLeft>-26){
sub2.style.pixelLeft--;
setTimeout("subClose1()",1);
}else{
sub2.style.pixelLeft=-26;
subMenuShowing=false;
hideM2();
}
}
subMenuShowing=false;
function subMenu1(){
var obj=event.srcElement;
subMenuShowing=true;
sub2out();
}
function sub2out(){
if(sub2.style.pixelLeft<2){
sub2.style.pixelLeft++;
setTimeout("sub2out()",1);
}
}
<!--代码结束-->
curSelect=0;
function showMenu(mID){
var oMenu=eval("menu"+mID);
var oCircle=eval("sl"+mID);
oMenu.style.pixelTop+=10;
if(oMenu.style.pixelTop<oCircle.style.pixelTop+6) {
oMenu.timeHandle=setTimeout("showMenu("+mID+")",1);
}
else oMenu.style.pixelTop=oCircle.style.pixelTop+6;
}
function hideMenu(mID){
var oMenu=eval("menu"+mID);
var oCircle=eval("sl"+mID);
oMenu.style.pixelTop-=10;
if(oMenu.style.pixelTop>-60) {
oMenu.timeHandle=setTimeout("hideMenu("+mID+")",1);
}
else oMenu.style.pixelTop=-80;
}
function lightMv(){
if(light.filters.Alpha.opacity<100) {
light.filters.Alpha.opacity+=5;
light.timeHandle=setTimeout("lightMv()",1);
}
}
function darkMv(){
if(light.filters.Alpha.opacity>0) {
light.filters.Alpha.opacity-=5;
light.timeHandle=setTimeout("darkMv()",1);
}
}
function sfMv1(){
sl1.style.pixelTop+=sl1.mvStep;
if ((sl1.dx++)>20) {
sl1.mvStep=-sl1.mvStep;
sl1.dx=0;
sl1.speed=parseInt(Math.random(1)*60+1)
}
sl1.timeHandle=setTimeout("sfMv1()",sl1.speed);
}
function sfMv2(){
sl2.style.pixelTop+=sl2.mvStep;
if ((sl2.dx++)>20) {
sl2.mvStep=-sl2.mvStep;
sl2.dx=0;
sl2.speed=parseInt(Math.random(1)*60+1)
}
sl2.timeHandle=setTimeout("sfMv2()",sl2.speed);
}
function sfMv3(){
sl3.style.pixelTop+=sl3.mvStep;
if ((sl3.dx++)>20) {
sl3.mvStep=-sl3.mvStep;
sl3.dx=0;
sl3.speed=parseInt(Math.random(1)*60+1)
}
sl3.timeHandle=setTimeout("sfMv3()",sl3.speed);
}
function sfMv4(){
sl4.style.pixelTop+=sl4.mvStep;
if ((sl4.dx++)>20) {
sl4.mvStep=-sl4.mvStep;
sl4.dx=0;
sl4.speed=parseInt(Math.random(1)*60+1)
}
sl4.timeHandle=setTimeout("sfMv4()",sl4.speed);
}
function stopAllMv(){
clearTimeout(sl1.timeHandle);
clearTimeout(sl2.timeHandle);
clearTimeout(sl3.timeHandle);
clearTimeout(sl4.timeHandle);
}
function startAllMv(){
clearTimeout(light.timeHandle);
darkMv();
sfMv1();
sfMv2();
sfMv3();
sfMv4();
}
function showM1(){
if(!subMenuShowing){
stopAllMv();
light.style.pixelTop=sl1.style.pixelTop-30;
clearTimeout(light.timeHandle);
clearTimeout(menu1.timeHandle);
lightMv();
showMenu(1);
}
}
function showM2(){
if(!subMenuShowing){
stopAllMv();
light.style.pixelTop=sl2.style.pixelTop-30;
clearTimeout(light.timeHandle);
clearTimeout(menu2.timeHandle);
lightMv();
showMenu(2);
}
}
function showM3(){
if(!subMenuShowing){
stopAllMv();
light.style.pixelTop=sl3.style.pixelTop-30;
clearTimeout(light.timeHandle);
clearTimeout(menu3.timeHandle);
lightMv();
showMenu(3);
}
}
function showM4(){
if(!subMenuShowing){
stopAllMv();
light.style.pixelTop=sl4.style.pixelTop-30;
clearTimeout(light.timeHandle);
clearTimeout(menu4.timeHandle);
lightMv();
showMenu(4);
}
}
function hideM1(){
if (!subMenuShowing){
startAllMv();
clearTimeout(menu1.timeHandle);
hideMenu(1);
}
}
function hideM2(){
if (!subMenuShowing){
startAllMv();
clearTimeout(menu2.timeHandle);
hideMenu(2);
}
}
function hideM3(){
if (!subMenuShowing){
startAllMv();
clearTimeout(menu3.timeHandle);
hideMenu(3);
}
}
function hideM4(){
if (!subMenuShowing){
startAllMv();
clearTimeout(menu4.timeHandle);
hideMenu(4);
}
}
function init(){
sl1.mvStep=1;
sl1.dx=0;
sl1.speed=50;
sl2.mvStep=1;
sl2.dx=0;
sl2.speed=1;
sl3.mvStep=1;
sl3.dx=0;
sl3.speed=10;
sl4.mvStep=1;
sl4.dx=0;
sl4.speed=20;
startAllMv();
}
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
</head>
<BODY text=#cccccc bgColor=#000000 leftMargin=0 topMargin=0 onload=init() marginheight="0" marginwidth="0">
<!--此处代码为菜单中的四个按钮,其中circle2.gif为调用的按钮图片,width=24和height=24为按钮的大小-->
<DIV class=table1 id=Layer1 style="Z-INDEX: 3; LEFT: 50px; WIDTH: 26px; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<!--按钮1-->
<DIV id=sl1 onmouseover=showM1() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 40px; HEIGHT: 24px" onmouseout=hideM1()><IMG height=24 src="190.gif" width=24></DIV>
<!--按钮2,此按钮代码中比其它三个按钮代码多了一个onclick=subMenu1(),这是点击按钮后滑出子菜单所需要的.-->
<DIV id=sl2 onmouseover=showM2() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 140px; HEIGHT: 24px" onclick=subMenu1() onmouseout=hideM2()><IMG height=24 src="190.gif" width=24></DIV>
<!--按钮3-->
<DIV id=sl3 onmouseover=showM3() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 240px; HEIGHT: 24px" onmouseout=hideM3()><IMG height=24 src="190.gif" width=24></DIV>
<!--按钮4-->
<DIV id=sl4 onmouseover=showM4() style="Z-INDEX: 3; WIDTH: 24px; CURSOR: hand; POSITION: absolute; TOP: 340px; HEIGHT: 24px" onmouseout=hideM4()><IMG height=24 src="190.gif" width=24></DIV>
<DIV class=alp id=light style="Z-INDEX: 2; LEFT: -26px; WIDTH: 80px; POSITION: absolute; TOP: 0px; HEIGHT: 80px"></DIV></DIV>
<!--代码结束-->
<!--此处代码为鼠标分别移上四个按钮后从上面滑下的四个图片,下面代码中src的值为调用的图片,其中的width=24为图片的大小-->
<DIV style="Z-INDEX: 2; LEFT: -60px; WIDTH: 30px; POSITION: absolute; TOP: 0px; HEIGHT: 100px">
<!--图片1-->
<DIV id=menu1 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 20px; POSITION: absolute; TOP: -80px; HEIGHT: 55px"><IMG height=62 src="190_1.gif" width=24></DIV>
<!--图片2-->
<DIV id=menu2 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 23px; POSITION: absolute; TOP: -80px; HEIGHT: 75px"><IMG height=77 src="190_2.gif" width=24></DIV>
<!--图片3-->
<DIV id=menu3 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 22px; POSITION: absolute; TOP: -80px; HEIGHT: 75px"><IMG height=77 src="190_3.gif" width=24></DIV>
<!--图片4-->
<DIV id=menu4 style="Z-INDEX: 5; LEFT: 82px; WIDTH: 23px; POSITION: absolute; TOP: -80px; HEIGHT: 77px"><IMG height=77 src="190_4.gif" width=24></DIV></DIV>
<!--图片代码结束-->
<!--此处代码为鼠标点击第二个按钮后弹出的滑出的子菜单,下面代码中WIDTH: 26px;、HEIGHT: 304px为子菜单的宽度和高度,可以根据需要修改,但尽量不要让高和度超出屏幕。-->
<DIV class=maskl id=masksub style="Z-INDEX: 4; LEFT: 80px; WIDTH: 32px; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<DIV id=sub2 style="Z-INDEX: 1; LEFT: -26px; WIDTH: 26px; POSITION: absolute; TOP: 137px; HEIGHT: 304px"><!--此处代码中Top的值为子菜单离屏幕上边的距离-->
<TABLE class=submenu height="100%" cellSpacing=2 cellPadding=0 width="100%" border=0>
<TBODY>
<TR><TD bgColor=#666699>特效</TD></TR><!--此处子菜单中的第1个单元格,bgColor=#666699为单元格的背景-->
<TR><TD bgColor=#666699>特效</TD></TR><!--此处子菜单中的第2个单元格,bgColor=#666699为单元格的背景-->
<TR><TD bgColor=#666699>特效</TD></TR><!--此处子菜单中的第3个单元格,bgColor=#666699为单元格的背景-->
<TR><TD bgColor=#666699 height=147>特效</TD></TR><!--此处子菜单中的第4个单元格,,bgColor=#666699为单元格的背景,height=147为单元格的高度,如果需要增加或减少按此样式修改.-->
<TR><TD onmouseover="this.bgColor='#9999cc'" onmouseout="this.bgColor='#666699'" bgColor=#666699 height=10>
<DIV style="CURSOR: hand" onclick=subClose1() align=center><B><FONT color=#ffff00>B</FONT></B></DIV>
</TD></TR></TBODY></TABLE></DIV></DIV>
<!--子菜单二代码结束-->
</body>
</html>
|
|
|
|
|
|
