设为首页·收藏本页
交友   手机游戏  扑虎网铃声  免费短信  扑虎网图片  picasa相册      
首页>互联网>语言脚本>JavaScript>正文

模拟QQ的菜单

日　期：2006-04-13     来　源：    阅 读:
　　

<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.51windows.net/data/folders/folder_7.asp')
outlookbar.additem('数据库',t,'http://www.51windows.net/data/folders/folder_13.asp')
t=outlookbar.addtitle('计算机技术')
outlookbar.additem('操作系统',t,'http://www.51windows.net/data/folders/folder_2.asp')
outlookbar.additem('网络安全',t,'http://www.51windows.net/data/folders/folder_2.asp')
outlookbar.additem('小技巧',t,'http://www.51windows.net/data/folders/folder_2.asp')
outlookbar.additem('硬件相关',t,'http://www.51windows.net/data/folders/folder_2.asp')
t=outlookbar.addtitle('文摘')
outlookbar.additem('求职 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('杂文 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('生活 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('人生 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('健康 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('知识 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('爱情 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('幽默笑话 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('寓言 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('教育 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('散文 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
t=outlookbar.addtitle('技术文档2')
outlookbar.additem('Web开发',t,'http://www.51windows.net/data/folders/folder_7.asp')
outlookbar.additem('数据库',t,'http://www.51windows.net/data/folders/folder_13.asp')
t=outlookbar.addtitle('计算机技术2')
outlookbar.additem('操作系统',t,'http://www.51windows.net/data/folders/folder_2.asp')
outlookbar.additem('网络安全',t,'http://www.51windows.net/data/folders/folder_2.asp')
outlookbar.additem('小技巧',t,'http://www.51windows.net/data/folders/folder_2.asp')
outlookbar.additem('硬件相关',t,'http://www.51windows.net/data/folders/folder_2.asp')
t=outlookbar.addtitle('文摘2')
outlookbar.additem('求职 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('杂文 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('生活 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('人生 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('健康 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('知识 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('爱情 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('幽默笑话 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('寓言 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('教育 ',t,'http://www.51windows.net/data/folders/folder_4.asp')
outlookbar.additem('散文 ',t,'http://www.51windows.net/data/folders/folder_4.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>


上一篇：效果不错的变色菜单   下一篇：用层模拟的窗口
收藏本文到:
digg this! 添加到del.icio.us bbmao网络收藏夹 添加到365key 我顶 添加到bolaa 推荐到奇客发现 添加到新浪vivi 添加到google书签 添加到yahoo+
查看全部JavaScript内容  
  • 效果不错的变色菜单　 2006-04-13 00:00:00
       style /* 先把这个 xmenu 的样式放到css里 */ .xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;backgrou...[阅读全文]
  • 用层模拟的窗口　 2006-04-13 00:00:00
       html head title_xWin/title meta http-equiv="Content-Type" content="text/html; charset=gb2312" META NAME="Description" CONTENT=" http://www.51windows.Net " style...[阅读全文]
  • 多级右键菜单　 2006-04-13 00:00:00
       HTMLHEADTITLE多级右键菜单 - 51windows.Net/TITLE META content="text/html; charset=gb2312" http-equiv=Content-Type STYLE type=text/cssBODY { FONT-SIZE: 12px; } .i...[阅读全文]
  • 自定义超链接的Title　 2006-04-13 00:00:00
       html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" title自定义title - 51windows.net/title /head body pB自定义title/B(IE)：把鼠标放在下...[阅读全文]
  • ie里window的method列表　 2006-04-13 00:00:00
       alert(sMsg) //弹出一个确认消息框 attachEvent(sEvent,pFunction) //绑定一个函数到某个事件，事件触发时随机执行其中一个被绑定的函数 blur() //令窗口丧失焦点 clearInt...[阅读全文]
  • Web Tabs　 2006-04-13 00:00:00
       html head titleWeb Tabs Demo - 51windows.net/title style body { background: buttonface; font-family: Tahoma; font-size: 12px; margin: 0px } div,td{font-size:9pt...[阅读全文]
  • 特效代码收集　 2006-04-13 00:00:00
       滚动条 CODE:[url=###][Copy to clipboard][/url] 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向...[阅读全文]
  • 跟随鼠标的八条线(IE)　 2006-04-13 00:00:00
       html title跟随鼠标的八条线 -51windows.Net/title head meta name="keywords" content="51windows.Net" meta http-equiv=Content-Type content="text/html; charset=gb231...[阅读全文]
  • 轻松搞定网页的【简繁转换】　 2006-04-13 00:00:00
       对网页进行简繁字体转换的方法一般有两种：一是使用《简繁通》这样的专业软件，另外一种是制作两套版本的网页。显然，这两种方法都较为麻烦，而且专业软件一般不能用于...[阅读全文]
  • 用JavaScript保护页面　 2006-04-13 00:00:00
       //不允许页面单独打开 if (window.top.location==window.location){ window.top.location="指定的地址"; } //不允许页面嵌在框架里 if (window.top.location!=window.locat...[阅读全文]
  • JS脚本控制的广告-对联（没有关闭）　 2006-04-12 00:00:00
       function initEcAd() { document.all.AdLayer1.style.posTop = -200; document.all.AdLayer1.style.visibility = 'visible' document.all.AdLayer2.style.posTop = -200; d...[阅读全文]
  • 图片下拉选择器的制作(2)　 2006-10-22 00:00:00
       第三 ，图片下拉列表框的滚动，要保证自动滚动到相应的图片出现在列表框的顶端：当手动滚动停止时，如果滚动条趋势是向下滚动，则自动继续向下滚动直至最近的图片在列表框...[阅读全文]
  • 图片下拉选择器的制作(1)　 2006-10-22 00:00:00
       相信大家都见过一些软件里的图片下拉选择控件吧？喏，OICQ中就有。但网页上的你见过没有？小阳今天就为你推出你心怡已久的这个控件，下面演示中就是了！效果还可以吧？心动...[阅读全文]
  • 用javascript实现浏览器地震效果　 2006-10-22 00:00:00
       一种把人吓一跳的感觉。实现方法是，把下面的JavaScript代码加入到 body与 /body之间： script language="JavaScript" function surfto(form) { var myindex=form.select1....[阅读全文]
  • 使主页呈现“飞舞”特效　 2006-10-22 00:00:00
       朋友，“天上掉陷饼”都听说过吧？呵呵，陷饼它算个么，今天教你一个天上掉￥的招儿，并且～～哗啦啦地掉！哈～哈～哈，来吧^_* 首先看效果 将下面的JavaScript代码加到 he...[阅读全文]
  • 如何制作浮动广告　 2006-10-22 00:00:00
       漫游于网络之间，你会发觉，因特网不但是信息的海洋，也是广告的海洋。除了普通的Gif Banner、Flash外，浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚...[阅读全文]
  • 让弹出窗口变得“体贴”一些　 2006-10-22 00:00:00
       让弹出窗口变得体贴一些 在网上冲浪时进入一些网站会出现弹出窗口。它可能是站长对你的亲切问候，也可能是网站的重要通告、网站广告之类的。但用得不好会让人产生厌烦心理...[阅读全文]
  • 用javascript实现变色背景和文字(2)　 2006-10-22 00:00:00
       2、前景文字： html head title bgcolor /title meta http-equiv="Content-Type" content="text/html; charset=gb2312" script language="JavaScript" !-- //you can assig...[阅读全文]
  • 初学javascript之cookie篇(1)　 2006-10-22 00:00:00
       简介 ==================================== 问题是我想解决自动访问http://www.thehungersite.com。这个页面能够限制你每一天只访问它一次（不要忘记在这链接上点击）。 ...[阅读全文]
  • HTC——浏览器上的舞者　 2006-10-22 00:00:00
       很久以来一直为页面工作的繁琐和杂乱而苦恼，做B/S很多时候痛苦就在做表现层这一块，业务逻辑和数据层的处理反而轻松不少。为什么？因为不能复用，大量的CSS和Javascript和...[阅读全文]
 用户名： （新注册） 密码： 匿名发表 评论(0条)
 评论内容：(不能超过250字，不支持HTML或代码，只能发表纯文字，请自觉遵守互联网相关政策法规。)
[an error occurred while processing this directive]
热点搜索

内衣写真 汤加丽人体艺术 裸体模特 偷拍 美女视频 诱惑自拍 美女性感 张靓颖走光 清纯少女 劲舞视频 经典搞笑 后舍男生 性感美女 花花公子 美女街舞 广告欣赏 全智贤

娱乐中心精华推荐
资讯中心精华推荐



合作伙伴: 电脑综合 8vv8娱乐榜

关于扑虎　|　扑虎新闻　|　联系扑虎　|　广告服务　|　招贤纳士

Copyright @ 2006-2007 poohu.com. All Right Reserved 陕ICP备06010975号