模拟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>

vue-仿手机qq的demo

概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 效果展示 免责声明 本项目为开源项目,如有类同,纯属...
  • sinat_17775997
  • sinat_17775997
  • 2017年09月08日 09:24
  • 487

模拟QQ菜单效果

模拟QQ菜单效果A:link { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}A:visited { COLOR: #000000; ...
  • phoebird
  • phoebird
  • 2009年02月14日 21:19
  • 382

模拟QQ登录页面

设计布局 代码体现 模拟QQ登陆页面.html /...
  • weixin_36599216
  • weixin_36599216
  • 2016年11月25日 00:16
  • 544

模拟QQ发送消息

08模拟QQ发送消息 textarea{display:block;width:600px;height:80px;} .qq{padding:15px;width:600px;border:...
  • zt_vicky
  • zt_vicky
  • 2016年12月12日 18:59
  • 318

模仿QQ的一个很帅的菜单栏

模仿QQ的一个很帅的菜单栏 a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana}//-->   var top...
  • yihuei123
  • yihuei123
  • 2007年04月30日 10:26
  • 422

js—QQ菜单简单实例

用JS索引值(this.index)实现的qq菜单实例! ul,h2{padding: 0; margin: 0;} li{list-style: none;} ...
  • qq_28147861
  • qq_28147861
  • 2017年11月04日 16:26
  • 28

简单模拟qq聊天程序(TCP版)

本程序特点:         1.分为client,server,tool 3个包,实现了多个任意客户端之间,进行通信         2.由于使用了包头+包体的信息传递格式,所以可以发送任意长度信息...
  • ljl157011
  • ljl157011
  • 2014年03月12日 23:15
  • 1584

仿QQ长按弹出功能菜单

android app普遍常用的弹出上下文菜单是列表式的。QQ列表,在上方弹出冒泡效果菜单,如图这里讲解一下如何写出这个效果:图片资源:两张图片,可以拼接成如上效果。首先,我们需要写布局文件: la...
  • meijian531161724
  • meijian531161724
  • 2015年07月08日 15:44
  • 3485

一个仿QQ导航菜单,非常实用!

仿QQ导航菜单.titleStyle{background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年03月16日 12:49
  • 1411

JavaScript做的QQ菜单-非常实用

最近比较忙,好久都没更新博客了,今天晚上特热,上网闲看。无意间进入这个网站 http://www.72b.net/ 发现它的QQ菜单很实用。花了点时间把它“抠”了出来,效果如下:本着开源共享的原则,现...
  • qjyong
  • qjyong
  • 2008年06月21日 22:56
  • 2450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟qq菜单
举报原因:
原因补充:

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