1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
2 <html xmlns="http://www.111cn.net/1999/xhtml">
3 <style type="text/css">
4 body{
5 margin:10px;
6 padding:10px;
7 }
8 a:link { text-decoration: none;color: blue}
9 a:active { text-decoration:blink}
10 a:hover { text-decoration:underline;color: red}
11 a:visited { text-decoration: none;color: green}
12 body,td,div,span,li{
13 font-size:12px;
14 }
15 .title01,.title02{
16 color:#00b;
17 font-weight:bold;
18 }
19 #DoorP{
20 width:200px;
21 height:300px;
22 padding:0px;
23 background:#FFFCF2;
24 }
25 .title01{
26 width:100%;
27 height:25px;
28 background:#FFFCF2;
29 cursor:pointer;
30 }
31 .title02{
32 width:100%;
33 height:25px;
34 background:#FFFCF2;
35 cursor:pointer;
36 }
37 .content{
38 background:#FFFCF2;
39 border-bottom:2px solid #fff;
40 overflow:hidden;
41 color:#666;
42 padding-left:4px;
43 padding-right:4px;
44 line-height:18px;
45 }
46 .curved {
47 width:202px;
48 }
49 .curved .b1, .curved .b2, .curved .b3, .curved .b4 {
50 font-size:1px;
51 display:block;
52 background:#FFFCF2;
53 overflow: hidden;
54 }
55 .curved .b1, .curved .b2, .curved .b3 {
56 height:1px;
57 }
58 .curved .b2, .curved .b3, .curved .b4 {
59 background:#FFFCF2;
60 border-left:1px solid #C7BC98;
61 border-right:1px solid #C7BC98;
62 }
63 .curved .b1 {
64 margin:0 4px;
65 background:#C7BC98;
66 }
67 .curved .b2 {
68 margin:0 2px;
69 border-width:0 2px;
70 }
71 .curved .b3 {
72 margin:0 1px;
73 }
74 .curved .b4 {
75 height:2px;
76 margin:0;
77 }
78 .curved .c1 {
79 margin:0 5px;
80 background:#C7BC98;
81 }
82 .curved .c2 {
83 margin:0 3px;
84 border-width:0 2px;
85 }
86 .curved .c3 {
87 margin:0 2px;
88 }
89 .curved .c4 {
90 height:2px;
91 margin: 0 1px;
92 }
93 .curved .boxcontent {
94 display:block;
95 background:transparent;
96 border-left:1px solid #C7BC98;
97 border-right:1px solid #C7BC98;
98 font-size:0.9em;
99 text-align:justify;
100 }
101 </style>
102 <div class="curved">
103 <b class="b1 c1"></b>
104 <b class="b2 c2"></b>
105 <b class="b3 c3"></b>
106 <b class="b4 c4"></b>
107 <div class="boxcontent">
108 <div id="DoorP">
109 <table>
110 <tr>
111 <td align="center">
112 第一层信息
113 </td>
114 </tr>
115 </table>
116 <div class="content" align="center">
117 <a href="#">二层</a><br/>
118 二层<br/>
119 二层<br/>
120 </div>
121 <b class="b1"></b>
122 <b class="b2"></b>
123 <b class="b3"></b>
124 <b class="b4"></b>
125
126 <table>
127 <tr>
128 <td align="center">
129 第二层信息
130 </td>
131 </tr>
132 </table>
133 <div class="content" align="center">
134 <a href="#">二层</a><br/>
135 二层<br/>
136 二层<br/>
137 </div>
138
139 <b class="b1"></b>
140 <b class="b2"></b>
141 <b class="b3"></b>
142 <b class="b4"></b>
143
144 <table>
145 <tr>
146 <td align="center">
147 第三层信息
148 </td>
149 </tr>
150 </table>
151 <div class="content" align="center">
152 <a href="#">二层</a><br/>
153 二层<br/>
154 二层<br/>
155 </div>
156 </div></div>
157 <b class="b4 c4"></b>
158 <b class="b3 c3"></b>
159 <b class="b2 c2"></b>
160 <b class="b1 c1"></b>
161 <script type="text/javascript">
162 var open = 2;
163 var openState = new Array();
164 var closeState = new Array();
165 var dH = 220;
166 function $(id){
167 if(document.getElementById(id))
168 {
169 return document.getElementById(id);
170 }
171 else
172 {
173 alert("没有找到!");
174 }
175 }
176 function $tag(id,tagName){
177 return $(id).getElementsByTagName(tagName)
178 }
179 function closeMe(Cid,Oid){
180 var h = parseInt(Ds[Cid].style.height);
181 //alert(h);
182 if(h > 2)
183 {
184 h = h - Math.ceil(h/3);
185 Ds[Cid].style.height = h+"px";
186 }
187 else
188 {
189
190 openMe(Oid);
191 clearTimeout(closeState[Cid]);
192 return false;
193 }
194 closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");
195 }
196 function openMe(Oid){
197 var h = parseInt(Ds[Oid].style.height);
198 //alert(h);
199 if(h < dH)
200 {
201 h = h + Math.ceil((dH-h)/3);
202 Ds[Oid].style.height = h+"px";
203 }
204 else
205 {
206 clearTimeout(openState[Oid]);
207 return false;
208 }
209 openState[Oid] = setTimeout("openMe("+Oid+")");
210 }
211 var Ds = $tag("DoorP","div");
212 var Ts = $tag("DoorP","table");
213 if(Ds.length != Ts.length)
214 {
215 alert("标题和内容数目不相同!");
216 }
217
218 for(var i = 0 ; i < Ds.length ; i++)
219 {
220 if(i==open)
221 {
222 Ds[i].style.height = dH+"px";
223 Ts[i].className="title01";
224 }
225 else
226 {
227 Ds[i].style.height = "0px";
228 Ts[i].className="title02";
229 }
230 Ts[i].value = i;
231 Ts[i].onmouseover = function(){
232 if(open==this.value)
233 {
234 return false;
235 }
236 Ts[open].className="title02";
237 Ts[this.value].className="title01";
238 for(var i = 0 ; i < openState.length ; i++)
239 {
240 clearTimeout(openState[i]);
241 clearTimeout(closeState[i]);
242 }
243 closeMe(open,this.value);
244 //openMe(this.value);
245 open = this.value;
246 }
247 }
248 function showDiv(id){
249 Ds[id].style.height=dH+"px";
250 Ds[open].style.height="0px";
251 open = id;
252 }
253 </script>
254 更多详细内容请查看：http://www.111cn.net/js_a/76/33038.htm
