24、QQ菜单代码特效

24QQ菜单代码特效

<html>

<head>

<title>网页特效- 模拟QQ菜单效果</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 

</head>

<body>

 

<STYLE type="text/css">

A:link { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}

A:visited { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}

A:hover { COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}

BODY { FONT-SIZE: 12px;}

TD { FONT-SIZE: 12px; line-height: 150%}

</style>

<script language="JavaScript">

<!--

function showitem(id,name)

{

       return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br>")

}

function switchoutlookBar(number)

{

       var i = outlookbar.opentitle;

       outlookbar.opentitle=number;

       var id1,id2,id1b,id2b

       if (number!=i && outlooksmoothstat==0){

              if (number!=-1)

              {

                     if (i==-1){

                            id2="blankdiv";

                            id2b="blankdiv";

                     }

                     else{

                            id2="outlookdiv"+i;

                            id2b="outlookdivin"+i;

                            document.all("outlooktitle"+i).style.border="1px none navy";

                            document.all("outlooktitle"+i).style.background=outlookbar.maincolor;

                            document.all("outlooktitle"+i).style.color="#ffffff";

                            document.all("outlooktitle"+i).style.textalign="center";

                     }

                     id1="outlookdiv"+number

                     id1b="outlookdivin"+number

                     document.all("outlooktitle"+number).style.border="1px none white";

                     document.all("outlooktitle"+number).style.background=outlookbar.maincolor; //title

                     document.all("outlooktitle"+number).style.color="#ffffff";

                     document.all("outlooktitle"+number).style.textalign="center";

                     smoothout(id1,id2,id1b,id2b,0);

              }

              else

              {

                     document.all("blankdiv").style.display="";

                     document.all("blankdiv").sryle.height="100%";

                     document.all("outlookdiv"+i).style.display="none";

                     document.all("outlookdiv"+i).style.height="0%";

                     document.all("outlooktitle"+i).style.border="1px none navy";

                     document.all("outlooktitle"+i).style.background=outlookbar.maincolor;

                     document.all("outlooktitle"+i).style.color="#ffffff";

                     document.all("outlooktitle"+i).style.textalign="center";

              }

       }

}

function smoothout(id1,id2,id1b,id2b,stat)

{

       if(stat==0){

              tempinnertext1=document.all(id1b).innerHTML;

              tempinnertext2=document.all(id2b).innerHTML;

              document.all(id1b).innerHTML="";

              document.all(id2b).innerHTML="";

              outlooksmoothstat=1;

              document.all(id1b).style.overflow="hidden";

              document.all(id2b).style.overflow="hidden";

              document.all(id1).style.height="0%";

              document.all(id1).style.display="";

              setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);

       }

       else

       {

              stat+=outlookbar.inc;

              if (stat>100)

                     stat=100;

              document.all(id1).style.height=stat+"%";

              document.all(id2).style.height=(100-stat)+"%";

              if (stat<100)

                     setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);

              else

              {

                     document.all(id1b).innerHTML=tempinnertext1;

                     document.all(id2b).innerHTML=tempinnertext2;

                     outlooksmoothstat=0;

                     document.all(id1b).style.overflow="auto";

                     document.all(id2).style.display="none";

              }

       }

}

function getOutLine()

{

       outline="<table "+outlookbar.otherclass+">";

       for (i=0;i<(outlookbar.titlelist.length);i++)

       {

              outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" ";

              if (i!=outlookbar.opentitle)

                     outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:#ffffff;height:20;border:1 none navy' ";

              else

                     outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:white;height:20;border:1 none white' ";

              outline+=outlookbar.titlelist[i].otherclass

              outline+=" onclick='switchoutlookBar("+i+")'><span class=smallFont>";

              outline+=outlookbar.titlelist[i].title+"</span></td></tr>";

              outline+="<tr><td name=outlookdiv"+i+" valign=top align=center id=outlookdiv"+i+" style='width:100%"

              if (i!=outlookbar.opentitle)

                     outline+=";display:none;height:0%;";

              else

                     outline+=";display:;height:100%;";

              outline+="'><div name=outlookdivin"+i+" id=outlookdivin"+i+" style='overflow:auto;width:100%;height:100%'>";

              for (j=0;j<outlookbar.itemlist[i].length;j++)

                     outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);

              outline+="</div></td></tr>"

       }

       outline+="</table>"

       return outline

}

function show()

{

       var outline;

       outline="<div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'>"

       outline+=outlookbar.getOutLine();

       outline+="</div>"

       document.write(outline);

}

function theitem(intitle,instate,inkey)

{

       this.state=instate;

       this.otherclass=" nowrap ";

       this.key=inkey;

       this.title=intitle;

}

function addtitle(intitle)

{

       outlookbar.itemlist[outlookbar.titlelist.length]=new Array();

       outlookbar.titlelist[outlookbar.titlelist.length]=new theitem(intitle,1,0);

       return(outlookbar.titlelist.length-1);

}

function additem(intitle,parentid,inkey)

{

       if (parentid>=0 && parentid<=outlookbar.titlelist.length)

       {

              outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey);

              outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";

              return(outlookbar.itemlist[parentid].length-1);

       }

       else

              additem=-1;

}

function outlook()

{

       this.titlelist=new Array();

       this.itemlist=new Array();

       this.divstyle="style='height:100%;width:100%;overflow:auto' align=center";

       this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%'valign=middle align=center ";

       this.addtitle=addtitle;

       this.additem=additem;

       this.starttitle=-1;

       this.show=show;

       this.getOutLine=getOutLine;

       this.opentitle=this.starttitle;

       this.reflesh=outreflesh;

       this.timedelay=50;

       this.inc=10;

       this.maincolor = "#336699"

}

function outreflesh()

{

       document.all("outLookBarDiv").innerHTML=outlookbar.getOutLine();

}

function locatefold(foldname)

{

       if (foldname=="")

              foldname = outlookbar.titlelist[0].title

       for (var i=0;i<outlookbar.titlelist.length;i++)

       {

              if(foldname==outlookbar.titlelist[i].title)

              {

                     outlookbar.starttitle=i;

                     outlookbar.opentitle=i;

              }

       }

}

var outlookbar=new outlook();

var tempinnertext1,tempinnertext2,outlooksmoothstat

outlooksmoothstat = 0;

 

 

var t;

t=outlookbar.addtitle('技术文档')

outlookbar.additem('Web开发',t,'http://www.7stk.com/index.asp')

outlookbar.additem('数据库',t,'http://www.7stk.com/index.asp')

t=outlookbar.addtitle('计算机技术')

outlookbar.additem('操作系统',t,'http://www.7stk.com/index.asp')

outlookbar.additem('网络安全',t,'http://www.7stk.com/index.asp')

outlookbar.additem('小技巧',t,'http://www.7stk.com/index.asp')

outlookbar.additem('硬件相关',t,'http://www.7stk.com/index.asp')

t=outlookbar.addtitle('文摘')

outlookbar.additem('求职 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('杂文 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('生活 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('人生 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('健康 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('知识 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('爱情 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('幽默笑话 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('寓言 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('教育 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('散文 ',t,'http://www.7stk.com/index.asp')

t=outlookbar.addtitle('技术文档2')

outlookbar.additem('Web开发',t,'http://www.7stk.com/index.asp')

outlookbar.additem('数据库',t,'http://www.7stk.com/index.asp')

t=outlookbar.addtitle('计算机技术2')

outlookbar.additem('操作系统',t,'http://www.7stk.com/index.asp')

outlookbar.additem('网络安全',t,'http://www.7stk.com/index.asp')

outlookbar.additem('小技巧',t,'http://www.7stk.com/index.asp')

outlookbar.additem('硬件相关',t,'http://www.7stk.com/index.asp')

t=outlookbar.addtitle('文摘2')

outlookbar.additem('求职 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('杂文 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('生活 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('人生 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('健康 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('知识 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('爱情 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('幽默笑话 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('寓言 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('教育 ',t,'http://www.7stk.com/index.asp')

outlookbar.additem('散文 ',t,'http://www.7stk.com/index.asp')

//-->

</script>

 

<table id=mnuList style="WIDTH:150px;HEIGHT: 100%" cellspacing=0 cellpadding=0 align=center border=0>

       <tr>

              <td bgcolor=#F0F0E5 id=outLookBarShow style="HEIGHT: 100%" valign=top align=middle name="outLookBarShow">

                     <script language="JavaScript">

                     <!--

                     locatefold("")

                     outlookbar.show()

                     //-->

                     </script>

              </td>

       </tr>

</table>

 

</body>

</html>

 

Write a comment

Comments: 1
  • #1

    csr04 (Tuesday, 01 September 2009 13:45)

    这个不错