Problem: Do a drag-and-drop pop-up layer effect (like a cue box)
First write half, tomorrow continue to struggle:
<! 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 "/> <meta name= Author" content= "Stri"/> <title>javascript the production of the center effect of the pop-up layer </title> ; style type= "Text/css" > * {padding:0; margin:0; list-style:none;} Body {Font-family:verdana, Geneva, Sans-serif; font-size:14px;} #a {width:300px; height:80px; border:5px solid #d3d3d3; Background-color: #f7f7f7; position:absolute; padding:10px;} a.btn {display:block; width:80px cursor:pointer; Background-color: #f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; v Ertical-align:middle; Text-align:center; margin:50px Auto 5px; Text-decoration:none; } a:hover {background-color: #333; color: #fff; font-weight:bold;} </style> <script language= "javascript" type= "Text/javascript" > window.onload=function Divcenter () {var c=document.createelement ("div"); Document.body.appendChild (c); C.setattribute ("id", "a"); var Divid=document.getelementbyid ("a"); divid.innerhtml+= "to browser deformation, refresh to see if the center"; divid.style.left= (document.documentelement.clientwidth-divid.clientwidth)/2+ document.documentelement.scrollleft+ "px"; settimeout (function () {divid.style.top= (document.documentelement.clientheight-divid.clientheight)/2+ document.documentelement.scrolltop-50+ "px";},200); } </script> </pead> <body> <script type= "Text/javascript" > X:for (var i=1; i<100;i++) { var a=document.createelement ("div"); A.innerhtml= "" +i+ ""; Document.body.appendChild (a);} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Click on the lower right corner of the "OPEN"
<! 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 "/> <meta name= Author" content= "Stri"/> <title>javascript the production of the center effect of the pop-up layer </title> ; style type= "Text/css" > * {padding:0; margin:0; list-style:none;} Body {Font-family:verdana, Geneva, Sans-serif; font-size:14px;} #a {width:380px; height:80px; border:5px solid #d3d3d3; Background-color: #f7f7f7; position:absolute; padding:10px; z-index:9999; a.btn {display:block; width:80px cursor:pointer; Background-color: #f7f7f7; padding:2px 0px; border:1px solid #d5d5d5 ; Vertical-align:middle; Text-align:center; margin:50px Auto 5px; Text-decoration:none; } a:hover {background-color: #333; color: #fff; font-weight:bold;} #aa {position:fixed; bottom:20px; right:10px;} </style> <script language= "JavaScript" type= "Text/javascript" > var drg=true; var ns= (document.all)? False:true; function Divcenter () {remove (); var c=document.createelement ("div"); Document.body.appendChild (c); C.setattribute ("id", "a"); C.setattribute ("Dragable", "dragable"); C.onmousedown=foo; var Divid=document.getelementbyid ("a"); divid.innerhtml+= "Code exception!<br> error number: 0015;"; divid.style.left= (document.documentelement.clientwidth-divid.clientwidth)/2+ document.documentelement.scrollleft+ "px"; settimeout (function () {divid.style.top= (document.documentelement.clientheight-divid.clientheight)/2+ document.documentelement.scrolltop-50+ "px";},100); }//Remove function remove () {if (document.getElementById ("a")) {Document.body.removeChild (document.getElementById) ( "a")); }} function foo () {if (DRG) {if (document.getElementById ("a")!=null) {Obj=d Ocument.getelementbyid ("a"); Document.onmOusedown=m_d; Document.onmouseup=m_u; } else {document.onmousemove=no_f; Document.onmousedown=no_f; Document.onmouseup=no_f; }} function M_d (e) {document.onmousemove=m_m; x= (NS)? E.pagex:event.x; y= (NS)? E.pagey:event.y; Cx=obj.offsetleft-x; Cy=obj.offsettop-y; } function M_m (e) {drg=false; x= (NS)? E.pagex:event.x; y= (NS)? E.pagey:event.y; Obj.style.left= (cx+x) + "px"; Obj.style.top= (cy+y) + "px"; function M_u () {drg=true; Document.onmousedown=no_f; Document.onmousemove=no_f; Document.onmouseup=no_f; function No_f () {return false;} </script> </pead> <body> Open <script type= "Text/javascript" > X:for (var i=1; i<100;i++) { var a=document.createelement ("div"); A.innerhtml= "" +i+ ""; Document.body.appendChild (a);} </script> ≪/body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
For each step of understanding, the final explanation. After all, the code is not fully sorted.
was baffled by the effect algorithm from the intermediate extended buffer!
OK, it's not that hard ****************.
is to have the left and top attributes of the div fade along with the width.
<! 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 "/> <meta name= Author" content= "Stri"/> <title>javascript the production of the center effect of the pop-up layer </title> ; style type= "Text/css" > * {padding:0; margin:0; list-style:none;} Body {Font-family:verdana, Geneva, Sans-serif; font-size:14px;} #a {width:380px; height:80px; border:5px solid #d3d3d3; Background-color: #f7f7f7; position:absolute; padding:10px; z-index:9999; a.btn {display:block; width:80px cursor:pointer; Background-color: #f7f7f7; padding:2px 0px; border:1px solid #d5d5d5 ; Vertical-align:middle; Text-align:center; margin:50px Auto 5px; Text-decoration:none; } a:hover {background-color: #333; color: #fff; font-weight:bold;} #aa {position:fixed; bottom:20px; right:10px;} </style> <script language= "JavaScript" type= "Text/javascript" > var drg=true; var ns= (document.all)? False:true; function Divcenter () {remove (); var c=document.createelement ("div"); Document.body.appendChild (c); C.setattribute ("id", "a"); C.setattribute ("Dragable", "dragable"); C.onmousedown=foo; var Divid=document.getelementbyid ("a"); divid.innerhtml+= "Code exception!<br> error number: 0015;"; divid.style.left= (document.documentelement.clientwidth-divid.clientwidth)/2+ document.documentelement.scrollleft+ "px"; settimeout (function () {divid.style.top= (document.documentelement.clientheight-divid.clientheight)/2+ document.documentelement.scrolltop-50+ "px";},100); H_w (300,80); }//Remove function remove () {if (document.getElementById ("a")) {Document.body.removeChild (document.getElementById) ( "a")); }} function foo () {if (DRG) {if (document.getElementById ("a")!=null) {Obj=d Ocument.getelementbyid ("a"); Document.onmousedown=m_d; Document.onmouseup=m_u; } else {document.onmousemove=no_f; Document.onmousedown=no_f; Document.onmouseup=no_f; }} function M_d (e) {document.onmousemove=m_m; x= (NS)? E.pagex:event.x; y= (NS)? E.pagey:event.y; Cx=obj.offsetleft-x; Cy=obj.offsettop-y; } function M_m (e) {drg=false; x= (NS)? E.pagex:event.x; y= (NS)? E.pagey:event.y; Obj.style.left= (cx+x) + "px"; Obj.style.top= (cy+y) + "px"; function M_u () {drg=true; Document.onmousedown=no_f; Document.onmousemove=no_f; Document.onmouseup=no_f; function No_f () {return false;} function H_w (a,b) {Divid=document.getelementbyid ("a"); Divid.style.width= "0px"; divid.style.height= "0px"; var s=function () {var w=parseint (divId.style.width); if (w<a) {Divid.style.width=w+math.ceil ((a-w)/20) + "px"; divid.style.left= (document.documentelement.clientwidth-divid.clientwidth)/2+ document.documentelement.scrollleft+ "px";} else {clearinterval (ST); divid.style.width=a+ "px";} var t=function () {var h=parseint (divId.style.height); if (h<b) {Divid.style.height=h+math.ceil (b-h)/10) + "px"; divid.style.top= (document.documentelement.clientheight-divid.clientheight)/2+ document.documentelement.scrolltop-10+ "px";} else {clearinterval (TT); divid.style.height=b+ "px";} } var st = Window.setinterval (s,1); var tt=window.setinterval (t,1); } </script> </pead> <body> submit <script type= "Text/javascript" > X:for (var i=1; i<100;i++) { var a=document.createelement ("div"); A.innerhtml= "" +i+ ""; Document.body.appendChild(a);} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
