|
|
1
<html>
2<head>
3<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
4<style type='text/css'>
5
.folder1
{}{text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}
6.folder2 {}{text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
7.foldercont{}{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}
8</style>
9
10<SCRIPT LANGUAGE=javascript>
11onload=function(){
12
var lstr = ""
13 for (var i=0; i<30; i++) lstr+= "haha..<br>";
14 var lofolder = new outlookfolder(null,335,100,15);
15 lofolder.addfolder("菜单1","1..<br>2..");
16 lofolder.addfolder("菜单2",lstr);
17 lofolder.addfolder("菜单3");
18 lofolder.addfolder("菜单4");
19 lofolder.addfolder("菜单5");
20 lofolder.showfolderX(0);
21
}
22 //[容器,高,宽,展开速度]
23function outlookfolder(aoP,aih,aiw,ait){
24 if (aih==null) aih=400;
25 if (aiw==null) aiw="100%";
26 if (ait==null) ait=20;
27 var loMain = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");
28 var lsUniqueID = loMain.uniqueID;
29 var loSlide = document.createElement("span");
30 loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";
31 var liContH = aih;
32
if (aoP==null){
33 document.body.appendChild(loMain);
34 document.body.appendChild(loSlide);
35 }else{
36 aoP.appendChild(loMain);
37 aoP.appendChild(loSlide);
38
}
39 //增加一个目录[名字,内容]
40 loMain.addfolder = function(str,cont){
41 var loPar = document.createElement("SPAN");
42 loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";
43 this.appendChild(loPar);
44 loPar.children[0].innerHTML = (str==null?" ":str);
45 loPar.children[1].innerHTML = (cont==null?" ":cont);
46 liContH -= parseInt(loPar.children[0].offsetHeight);
47 }
48 //打开／关闭第x个目录夹
49 loMain.showfolderX = function(aix){
50 loMain.showme(loMain.children[aix].children[0])
51 }
52 //打开/关闭当前obj所在的目录
53 loMain.showme = function(obj){
54 if (loMain.moving) return;
55 loMain.moving = true;
56 if (obj.bOpen){
57 obj.bOpen = false;
58 loMain.closefolder(obj.parentElement.children[1]);
59 obj.className = 'folder1';
60 }else{
61 obj.bOpen = true;
62 loMain.openfolder(obj.parentElement.children[1]);
63 obj.className = 'folder2';
64 var lxfolders = loMain.children;
65 for (var i=0; i<lxfolders.length; i++){
66 var loChild = lxfolders.children[0];
67 if(loChild.uniqueID!=obj.uniqueID){
68 lxfolders.children[1].style.height=1;
69 loChild.bOpen = false;
70 loChild.className = 'folder1';
71 }
72 }
73 }
74 loMain.SlideItemsAction(obj.parentElement.children[1]);
75 }
76 //为目录内容设置Slide
77 var loSlideItem = null;
78 var lbSlideing = false;
79 loMain.SlideCilckdown = function(){ //向下滚动
80 loSlideItem.scrollTop += 2;
81 if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
82 }
83 loMain.SlideCilckup = function(){ //向上滚动
84 loSlideItem.scrollTop -= 2;
85 if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
86 }
87 loMain.SlideClickStart = function(){ //允许开始滚动
88 lbSlideing=false;
89 }
90 loMain.SlideClickStop = function(){ //强制停止滚动
91 lbSlideing=true;
92 }
93 loMain.SlideItemsAction = function(obj){
94 var loUp = loSlide.children[0];
95 var loDown = loSlide.children[1];
96 if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){
97 loUp.style.display="none";
98 loDown.style.display="none";
99 }else{
100 loSlideItem = obj;
101 var lxOffset = getTrueOffset(obj);
102 var lileft = lxOffset[0]+obj.offsetWidth-20;
103 var litop = lxOffset[1]+obj.offsetHeight+5;
104 with(loUp.style){
105 display="";
106 left=lileft;
107 top=litop;
108 }
109 with(loDown.style){
110 display="";
111 left=lileft;
112 top=litop+liContH-40;
113 }
114 }
115 }
116 //逐渐关闭obj所在的内容显示
117 loMain.closefolder = function(obj,ai){
118 if (ai==null) ai=liContH;
119 if (ai<ait){ obj.style.height=1; ai=1}
120 if (ai>1){
121 obj.style.height = ai;
122 ai -= ait;
123 setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
124 return;
125 }
126 loMain.moving = false;
127 }
128 //逐渐打开obj所在的内容显示
129 loMain.openfolder = function(obj,ai){
130 if (ai==null) ai=1;
131 if (liContH>ai){
132 obj.style.height = ai;
133 ai += ait;
134 setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
135 return;
136 }
137 loMain.moving = false;
138 }
139 function getTrueOffset(e){
140 var x=0; var y=0;
141 if(!e)return [x,y];
142 while(e){
143 x+=parseInt(e.offsetLeft);
144 y+=parseInt(e.offsetTop);
145 e=e.offsetParent;
146 }
147 return [x,y];
148 }
149 return loMain;
150}
151</SCRIPT>
152 |
|
QQ群⑧：
窥视卡
雷达卡
发表于 2015-9-13 13:17:08
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡