<! 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>js_ open Layer off layer effect _ cloud Habitat Community </title> <style type=" Text/css "> body,span,div,td{ Font-size:12px;line-height:1.5em;color: #849BCA;} #bodyL {float:left; width:84px; margin-right:2px; } a.od{width:80px; height:25px; line-height:25px; Text-align:center; Font-weight:bold; border:2px solid #849BCA; Display:block; Color: #547BC9; Float:left; Text-decoration:none; margin-top:2px; a.od:link{background: #EEF1F8; a.od:visited{background: #EEF1F8; a.od:hover{background: #EEE; a.od:active{background: #EEE; } #fd {width:500px; height:200px; Background: #EDF1F8; BORDER:2PX Solid #849BCA; margin-top:2px; margin-left:2px; Float:left; Overflow:hidden; Position:absolute; left:0px; top:0px; Cursor:move; Float:left; /*filter:alpha (OPACITY=50); */} content{padding:10px; } </style> </pead> <body> <div id= "Bodyl" > [open Layer] [close layer] </div> <div id= "FD" > <div class= "Content" > Mobile layer </div> </div> <SC Ript type= "Text/javascript" > var ProX; var Proy; var Proxc; var Proyc; function Show (ID) {/*--open--*/clearinterval (ProX); Clearinterval (Proy); Clearinterval (PROXC); Clearinterval (PROYC); var o = document.getElementById (ID); O.style.display = "block"; O.style.width = "1px"; O.style.height = "1px"; ProX = setinterval (function () {OpenX (o,500)},10); function OpenX (o,x) {/*--Open x--*/ var cx = parseint (o.style.width); if (CX < x) {O.style.width = (cx + math.ceil ((X-CX)/5)) + "px"; else {clearinterval (ProX); Proy = setinterval (function () {Openy (o,200)},10); } function Openy (o,y) {/*--open y--*/var cy = parseint (o.style.height); if (Cy < y) {O.style.height = (cy + math.ceil ((y-cy)/5)) + "px"; else {clearinterval (Proy); The function closeed (ID) {/*--closes--*/clearinterval (ProX); Clearinterval (Proy); Clearinterval (PROXC); Clearinterval (PROYC); var o = document.getElementById (ID); if (O.style.display = = "Block") {Proyc = SetInterval (function () {Closey (o)},10); The function Closey (o) {/*--open y--*/var cy = parseint (o.style.height); if (cy > 0) {o.style.height = (Cy-math.ceil (CY/5)) + "px"; else {clearinterval (PROYC); PROXC = setinterval (function () {closex (o)},10); The function Closex (o) {/*--opens x--*/var cx = parseint (o.style.width); if (cx > 0) {o.style.width = (Cx-math.ceil (CX/5)) + "px"; else {clearinterval (PROXC); O.style.display = "None"; }/*-------------------------mouse Drag---------------------*/var OD = document.getelement Byid ("FD"); var dx,dy,mx,my,moused; var Odrag; var Isie = document.all? True:false; Document.onmousedown = function (e) {var e = e. e:event; if (E.button = = (document.all. 1:0)) {moused = true; } } document.onmouseup = function () {moused = false; Odrag = ""; if (Isie) {od.releasecapture (); od.filters.alpha.opacity = 100; else {window.releaseevents (od. MOUSEMOVE); od.style.opacity = 1; }//function Readymove (e) {od.onmousedown = function (e) {Odrag = this; var e = e? E:event; if (E.button = = (document.all. 1:0)) {mx = E.clientx; my = E.clienty; Od.style.left = od.offsetleft + "px"; Od.style.top = od.offsettop + "px"; if (Isie) {od.setcapture (); Od.filters.alpha.opacity = 50; else {window.captureevents (event.mousemove); od.style.opacity = 0.5; } alert (MX); alert (my); } Document.onmousemove = function (e) {var e = e. e:event; alert (MRX); alert (E.button); if (moused==true && odrag) {var mrx = e.clientx-mx; var mry = e.clienty-my; Od.style.left = parseint (od.style.left) +mrx + "px"; Od.style.top = parseint (od.style.top) + Mry + "px"; mx = e.clientx; my = E.clienty; }} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
