1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 5 <head> 6 <style type="text/css"> 7 body { 8 margin: 10px; 9 padding: 10px; 10 } 11 12 body, h2, div, span, li { 13 font-size: 12px; 14 } 15 16 .title01, .title02 { 17 color: #fff; 18 font-weight: bold; 19 } 20 21 #DoorP { 22 border: 12px solid #eee; 23 width: 150px; 24 padding: 4px; 25 background: #fff; 26 } 27 28 h2 { 29 text-align: center; 30 margin: 0px; 31 padding: 0px; 32 line-height: 22px; 33 } 34 35 .title01 { 36 width: 100%; 37 height: 25px; 38 background: #99cc00; 39 cursor: pointer; 40 } 41 42 .title02 { 43 width: 100%; 44 height: 25px; 45 background: #006600; 46 cursor: pointer; 47 } 48 49 .content { 50 background: #eee; 51 border-bottom: 2px solid #fff; 52 overflow: hidden; 53 color: #666; 54 padding-left: 4px; 55 padding-right: 4px; 56 line-height: 18px; 57 font-family: "宋体"; 58 width: 100%; 59 height: 1px; 60 display: block; 61 } 62 63 .content a:link, .content a:visited { 64 color: #666666; 65 text-decoration: none; 66 } 67 68 .content a:hover { 69 color: #FF6600; 70 text-decoration: underline; 71 } 72 </style> 73 </head> 74 <body> 75 <div id="DoorP"> 76 <h2>懒人建站</h2> 77 <div class="content"><a href="http://www.51xuediannao.com/js/nav/">·导航菜单</a></div> 78 <h2>HTML+CSS模板</h2> 79 <div class="content"><a href="http://www.51xuediannao.com/HTML+CSS/">·HTML+CSS模板</a></div> 80 <h2>焦点幻灯</h2> 81 <div class="content"><a href="http://51xuediannao.com/JS/Slide/">·焦点幻灯_懒人建站</a></div> 82 <h2>CSS技巧</h2> 83 <div class="content"><a href="http://51xuediannao.com/jiqiao/css/">·懒人建站提供CSS技巧</a></div> 84 <h2>CSS建站技巧</h2> 85 <div class="content"><a href="http://51xuediannao.com/jiqiao/cms/">·CSS建站技巧</a></div> 86 <h2>JS广告代码</h2> 87 <div class="content"><a href="http://51xuediannao.com/JS/AD/">·JS广告代码</a></div> 88 </div> 89 <script type="text/javascript"> 90 var onum = 0; 91 var closeState = new Array(); 92 var ch = 200; 93 function $(id) { if (document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!") } } 94 function $tag(id, tagName) { return $(id).getElementsByTagName(tagName) } 95 var Ds = $tag("DoorP", "div"); 96 var Ts = $tag("DoorP", "h2"); 97 if (Ds.length != Ts.length) { alert("初始化失败!"); } 98 function showMe(Cid, Oid) { var h = parseInt(Ds[Cid].style.height); var h2 = parseInt(Ds[Oid].style.height); var dH = ch; if (h > 0) { h = h - Math.ceil(h / 3); Ds[Cid].style.height = h + "px"; }; if (h2 < dH) { h2 = h2 + Math.ceil((dH - h2) / 3); Ds[Oid].style.height = h2 + "px"; }; if (h <= 0 && h2 >= dH) { clearTimeout(closeState[Cid]); return false; }; closeState[Cid] = setTimeout("showMe(" + Cid + "," + Oid + ")"); } 99 for (var i = 0; i < Ds.length; i++) { 100 if (i == onum) { Ds[i].style.height = ch + "px"; Ts[i].className = "title01"; } else { Ds[i].style.height = "0px"; Ts[i].className = "title02"; } 101 Ts[i].value = i; 102 Ts[i].onclick = function () { 103 if (onum == this.value) { return false; }; 104 Ts[onum].className = "title02"; 105 Ts[this.value].className = "title01"; 106 for (var i = 0; i < closeState.length; i++) { clearTimeout(closeState[i]); } 107 showMe(onum, this.value); 108 onum = this.value; 109 } 110 } 111 </script> 112 </body> 113 </html>