Layer 的具体应用之交互式菜单

Layer 的具体应用之交互式菜单

交互式菜单

< HTML >
< HEAD >
< TITLE >layer用法例1< /TITLE >
< /HEAD >
< BODY >
< SCRIPT language=javascript >
function xscd(sub)
{
for(i=0;i< 600;i++) eval(sub).clip.bottom = i/4; }
function yccd(sub) { eval(sub).clip.bottom = 17; }
function neww(fna) { window.location=fna;}
< /SCRIPT >
< LAYER name ="laycd"
left ="150"
top ="0"
clip =500,200
visibility="show"
>
< !--形成菜单区域 -- >
< LAYER left="0" top="0" width="504"
clip="504,24" visibility="show" bgcolor=yellow >
  < /LAYER >
< !--形成菜单的底色 -- >
< LAYER name="wzcd" left="4" top="4" width="96"
    clip="96,18" visibility="show" onMouseOver="xscd('wzcd');"
     onMouseOut="yccd('wzcd');" bgcolor="ffcc66" >
< FONT size=3 FACE="楷体_GB2312-80" >
   < center >文字菜单 < /center >
     < /FONT >< BR >
< CENTER >< A HREF="caowo.htm" >草屋< /A >< /CENTER >
< CENTER >< A HREF="bpsh.html" >青春白皮书< /A >
    < /CENTER >
< CENTER >< A HREF="shsh.html" >上山< /A >< /CENTER >
< /LAYER >
< !-- -- >
< LAYER name="txcd" left="104" top="4"
   width="96" clip="96,17" visibility="show"
   onMouseOver="xscd('txcd');" onMouseOut="yccd('txcd');
     " bgcolor="ffcc66" >
< B >< FONT FACE="楷体_GB2312" >< FONT SIZE=+0 >
    < center >图象菜单< /center >< /FONT >< /FONT >< /B >
< CENTER >
< A HREF="shsh.html" >< IMG SRC="cd2.gif" BORDER=0
    HEIGHT=30 WIDTH=90 >< /A >< BR >
< A HREF="caowo.htm" >< IMG SRC="cd1.gif" BORDER=0
    HEIGHT=30 WIDTH=90 >< BR >
< A HREF="bpsh.html" >< IMG SRC="cd3.gif" BORDER=0
     HEIGHT=30 WIDTH=90 >< /A >
< /CENTER >
< /LAYER >
< !-- -- >
< LAYER name="alcd" left="204" top="4"
    width="96" clip="96,17" visibility="show"
    onMouseOver="xscd('alcd');" onMouseOut="yccd('alcd');"
     bgcolor="ffcc66" >
< B >< FONT FACE="楷体_GB2312" >< FONT SIZE=+0 >
    < center >按钮菜单< /center >< /FONT >< /FONT >< /B >
< CENTER >
< FORM method="POST" >
< INPUT type=button value=草屋
      onclick=neww("caowo.htm") >< BR >
< INPUT type=button value=上山
       onclick=neww("shsh.html") >< BR >
< INPUT type=button value=白皮书
      onclick=neww("bpsh.html") >< BR >
< INPUT type=button value=移动
      onclick=laycd.moveBy(50,50) >
< /FORM >
< /CENTER >
< /LAYER >< !-- -- >
< LAYER name="qtcd" left="304" top="4"
    width="96" clip="96,17" visibility="show"
    onMouseOver="xscd('qtcd');" onMouseOut="yccd('qtcd');"
     bgcolor="ffcc66" >
< FONT FACE="楷体_GB2312" >其他菜单< /FONT >
< CENTER >
< A HREF="caowo.htm" >草屋< /A >< BR >
< FORM method="POST" >
    < INPUT type=button value=白皮书
     onclick=neww("bpsh.html") >< /FORM >
< A HREF="shsh.html" >< IMG SRC="cd2.gif" BORDER=0
      HEIGHT=30 WIDTH=90 >< /A >
< /CENTER >
< /LAYER >< !-- -- >
< LAYER name="goldsoft" left="404" top="4"
     width="96" clip="96,17"
      visibility="show" onMouseOver="xscd('goldsoft');"
     onMouseOut="yccd('goldsoft');" bgcolor="ffcc66" >
< IMG SRC="cd4.gif" HEIGHT=21 WIDTH=91 >
< CENTER >< BR >
< A HREF="http://person.zj.cninfo.net/~bigmouse/" >
     天下居< /A >
< /LAYER >
< /LAYER >
< SCRIPT language="JavaScript" >
wzcd = document.layers['laycd'].layers['wzcd'];
txcd = document.layers['laycd'].layers['txcd'];
alcd = document.layers['laycd'].layers['alcd'];
qtcd = document.layers['laycd'].layers['qtcd'];
goldsoft = document.layers['laycd'].layers['goldsoft'];
< /SCRIPT >
< /BODY >
< /HTML >
　

---- 本例在页面上创建了交互式的菜单，包含了文字菜单项，图形菜单项和按钮菜单项，选择不同菜单则打开相应页面, 选择按钮菜单中的" 移动" 项，则菜单在页面上移动