<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> DOM translucent prompt layer </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; } . Content { Padding: 10px; } </Style> </Head> <Body> <Div id = "bodyL"> <A href = "#" class = "od" onclick = "show ('fd '); return false;"> [Open layer] </A> <A href = "#" class = "od" onclick = "closeed ('fd '); return false;"> [Close layer] </A> </Div> <Div id = "fd" style = "display: none; filter: alpha (opacity = 100); opacity: 1;"> <Div class = "content"> mobile layer </div> </Div> <Script 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 ); } } Function closeed (id) {/* -- disable --*/ ClearInterval (prox ); ClearInterval (proy ); ClearInterval (proxc ); ClearInterval (proyc ); Var o = document. getElementById (id ); If (o. style. display = "block ") { Proyc = setInterval (function () {closey (o)}, 10 ); } } 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 ); } } Function closex (o) {/* -- open 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 "; } } /* Drag the mouse */ Var od = document. getElementById ("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> <br/> <Div> http://www.jb51.net/</div> </Body> </Html> |