模拟qq菜单

转载 2006年05月22日 15:00:00

<html>
<head>
<title>网页特效|Linkweb.cn/Js|--- 模拟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,target)
{
 return ("<span><a href='"+id+"' target="+target+">"+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,outlookbar.itemlist

[i][j].target);
  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,intarget)
{
 this.state=instate;
 this.otherclass=" nowrap ";
 this.key=inkey;
 this.title=intitle
 this.target=intarget;
}
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,intarget)
{
 if (parentid>=0 && parentid<=outlookbar.titlelist.length)
 {
  outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey,intarget);
  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=1000;
 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://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('数据库',t,'http://linkweb.cn/js/index.asp','mainFrame')
t=outlookbar.addtitle('计算机技术')
outlookbar.additem('操作系统',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('网络安全',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('小技巧',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('硬件相关',t,'http://linkweb.cn/js/index.asp','mainFrame')
t=outlookbar.addtitle('文摘')
outlookbar.additem('求职 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('杂文 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('生活 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('人生 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('健康 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('知识 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('爱情 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('幽默笑话 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('寓言 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('教育 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('散文 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
t=outlookbar.addtitle('技术文档2')
outlookbar.additem('Web开发',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('数据库',t,'http://linkweb.cn/js/index.asp','mainFrame')
t=outlookbar.addtitle('计算机技术2')
outlookbar.additem('操作系统',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('网络安全',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('小技巧',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('硬件相关',t,'http://linkweb.cn/js/index.asp','mainFrame')
t=outlookbar.addtitle('文摘2')
outlookbar.additem('求职 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('杂文 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('生活 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('人生 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('健康 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('知识 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('爱情 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('幽默笑话 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('寓言 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('教育 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
outlookbar.additem('散文 ',t,'http://linkweb.cn/js/index.asp','mainFrame')
//-->
</script>

<table id=mnuList style="WIDTH:150px;HEIGHT: 50%" 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>

相关文章推荐

模拟QQ菜单

  • 2013年02月20日 17:23
  • 9KB
  • 下载

【TopRightMenu】一步搞定手机QQ界面右上角弹出菜单

转载自:https://gold.xitu.io/post/5865f43bac502e006129ba8a 转载请注明出处 类似手机QQ界面右上角的弹出菜单,使用recyclerview...

模拟QQ下拉菜单 c#

  • 2009年08月08日 09:49
  • 26KB
  • 下载

仿QQ好友动态添加说说、图片菜单滑动移进移出效果--在指定控件下面显示popupwindow动画不移效果

上一篇:PopupWindow 自定义窗口从屏幕底部上移-动画 先看一下要做成的样子和我做成的样子:   功能一样,但样子不是太好看,大家微微看看就行了~ 好了,我继续上代码: 看我的主...

Android实现仿QQ登录可编辑下拉菜单

在Android里,直接提供的Spinner控件虽然可以实现下拉菜单的效果,但其效果并不理想,很多时候我们需要类似手机QQ那样既可以在文本框中直接输入编辑文字,可以在下拉菜单中选中或者删除菜单选项,并...

微信菜单实现QQ在线聊天(一)

1.功能介绍,附有图片 可以在微信的自定义菜单中添加【在线QQ】,采用链接的格式,当用户点击了菜单之后,微信会自动调用手机QQ客户端并弹出与你设定的QQ号聊天的窗口,这样,用户就可以直接和你聊天了。如...

Android仿QQ空间底部菜单

之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字。于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考。效果如下图所示:  ...

unityios开发--NGUI类似QQ菜单实现

NGUI很容易就可以实现点击一个按钮填出全部在点击一下隐藏的效果,在NGUI自带的事例中也有类似的效果,今天简单说一下用到的那几个脚本,效果点击箭头之后就出现这个效果。 第一步创建一个 创建Men...

QQ5.0 新版 侧滑菜单效果实现!

最近QQ Android最新版本5.0,在侧滑菜单中,不是像平时使用的Sildermenu, 点击侧滑动画效果感觉有点高尚大,模仿IOS风格的侧边侧滑菜单,效果相当不错, 之前在IOS平台见到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟qq菜单
举报原因:
原因补充:

(最多只允许输入30个字)