<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> practical Sliding layer code </title> <script> var flag=0; function f_s (id) {var obj=document.getelementbyid (ID); obj.style.display= "Block"; Obj.style.height= "1px"; var changew=function () {var obj_h=parseint (obj.style.height); if (obj_h<=160) {obj.style.height= (Obj_h+math.ceil (160-obj_h)/10)) + "px"; } else{clearinterval (BW1); } bw1= setinterval (changew,1); if (flag>0) {clearinterval (BW2); }} function Closew (id) {flag++; var Obj=document.getelementbyid (ID); var closediv=function () {clearinterval (BW1); var obj_h=parseint (obj.style.height); if (obj_h>1) {obj.style.height= (Obj_h-math.ceil (obj_h)/10) + "px"; } else{CLearinterval (BW2); Obj.style.display= "None"; } bw2= setinterval (closediv,1); function Showdiv () {var ele = document.getElementById ("Div1"); Clearinterval (BW1); Clearinterval (BW2); Ele.style.display = "block"; Ele.style.height = 160 + "px"; } </script> <style type= "Text/css" > <!--body,td,th {font-family:verdana, Arial, Helvetica, Sans-ser If font-size:12px; }. c {width:100%;height:30px;} . C ul {margin:0px;padding:0px;} . C ul li{width:100px;height:30px;float:left;background: #eeeeee list-style-type:none}--> </style> </ head> <body> <div class= "C" > <ul> <li onmouseover= "f_s (' Div1 ')" onmouseout= "Closew (' Div1 ')" &G t;111</li> <li>222</li> <li>333</li> </ul> </div> <div id= "Div1" onmous Eover= "Showdiv ()" onmouseout= "Closew (' Div1 ')" >000</div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
