java技术文档
BlogJava
首页
新随笔
联系
聚合
管理
posts - 104, comments - 34, trackbacks - 0
模拟QQ菜单效果
<html> <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://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('数据库',t,'http://sc.jcwcn.com/tx/js/index.asp') t=outlookbar.addtitle('计算机技术') outlookbar.additem('操作系统',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('网络安全',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('小技巧',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('硬件相关',t,'http://sc.jcwcn.com/tx/js/index.asp') t=outlookbar.addtitle('文摘') outlookbar.additem('求职 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('杂文 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('生活 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('人生 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('健康 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('知识 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('爱情 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('幽默笑话 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('寓言 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('教育 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('散文 ',t,'http://sc.jcwcn.com/tx/js/index.asp') t=outlookbar.addtitle('技术文档2') outlookbar.additem('Web开发',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('数据库',t,'http://sc.jcwcn.com/tx/js/index.asp') t=outlookbar.addtitle('计算机技术2') outlookbar.additem('操作系统',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('网络安全',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('小技巧',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('硬件相关',t,'http://sc.jcwcn.com/tx/js/index.asp') t=outlookbar.addtitle('文摘2') outlookbar.additem('求职 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('杂文 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('生活 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('人生 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('健康 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('知识 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('爱情 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('幽默笑话 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('寓言 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('教育 ',t,'http://sc.jcwcn.com/tx/js/index.asp') outlookbar.additem('散文 ',t,'http://sc.jcwcn.com/tx/js/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=center name="outLookBarShow"> <script language="JavaScript"> <!-- locatefold("") outlookbar.show() //--> </script> </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行
posted on 2007-12-11 15:14
末日风情
阅读(531)
评论(0)
编辑
收藏
所属分类:
javascript
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
js获取浏览器各种属性。
js实现选择文件路径（限IE）
合并单元格
JS中open()函数介绍
Onunload与Onbeforeunload
如何控制页面内容的加载顺序
event.srcElement
javascript keycode大全
JS中confirm,alert,prompt函数
拖拽例子
<
2007年12月
>
日
一
二
三
四
五
六
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(4)
给我留言
查看公开留言
查看私人留言
随笔分类
AJAX(2)
CSS(4)
freemarker
hibernate
HTML/XML(6)
Jasper Report(1)
javascript(26)
java编程(20)
JSP基础(4)
oracle(18)
spring(1)
struts(3)
其他(13)
架构设计(2)
编码规范
设计模式(1)
随笔档案
2012年8月 (1)
2011年4月 (2)
2011年2月 (2)
2010年8月 (9)
2010年7月 (1)
2009年11月 (2)
2009年10月 (3)
2009年9月 (11)
2009年8月 (4)
2009年6月 (7)
2008年12月 (1)
2008年10月 (3)
2008年8月 (4)
2008年7月 (1)
2008年6月 (2)
2008年4月 (2)
2008年3月 (1)
2008年2月 (1)
2008年1月 (3)
2007年12月 (15)
2007年11月 (14)
2007年10月 (12)
2007年8月 (2)
搜索
最新评论
1. re: Blowfish加密算法之Java实现[未登录]
这个有c语言版没
--小丸子
2. re: SSH实现分页
我和上面的一样，你的分页很简单，能否发一份给我呢？
我的QQ邮箱是511775600@qq.com
--眯露
3. re: String.equals()和String.equalsIgnoreCase()的区别
观后感矛
--和规划局
4. re: 时间控件（可含时分秒）
thank you 楼主
--yaoj
5. re: 时间控件（可含时分秒）
评论内容较长,点击标题查看
--末日风情
阅读排行榜
1. request.getParameterNames 使用方法(10268)
2. 时间控件（可含时分秒）(8067)
3. JS中open()函数介绍(6592)
4. JS中confirm,alert,prompt函数(5837)
5. java实现ascii与中文互转(5699)
评论排行榜
1. 时间控件（可含时分秒）(9)
2. SSH实现分页(3)
3. showModalDialog/showModelessDialog实例,父窗口向子窗口传递值,子窗口设置父窗口的值(3)
4. 网页常用小技巧(JavaScript) (2)
5. Truncate Table (2)