QQ space is often a friend of the personality of QQ space editing module impressed, you can drag the elements on the page and adjust the size of the dynamic layout, of course, every time I csdn blog will also be in the lower right corner to see a news window, this effect is really cool, then we also come to achieve a bar.
implementation Steps:
1. The first is to dynamically create an HTML structure like this:
Copy Code code as follows:
<div style= "Height:200px;width:200px;overflow:hidden" id= "a" >
<div id= "Head" style= "background-color:blue;height:5%" >
<span id= "Move" style= "width:90%;height:100%" ></span>
<span id= "Close" style= "overflow:hidden;white-space:nowrap;background-color:red" > Shutdown </span>
</div>
<div id= "Body" style= "width:100%;height:90%" ></div>
</div>
2.id for the body for you to place the content of the Div container, move is removable span,close is to close this window (exactly layer).
3. Then bind the events to these objects. Take a specific look at the code.
Copy Code code as follows:
sx.activex.windowex={
Init:function (step,t,html) {
var a=document.createelement ("div");
var head=document.createelement ("div");
var move=document.createelement ("span");
var close=document.createelement ("span");
close.innertext= "Close";
var body=document.createelement ("div");
Head.appendchild (move);
Head.appendchild (Close);
A.appendchild (head);
A.appendchild (body);
A.style.height= "200px";
A.style.width= "200px";
A.style.overflow= "hidden";
A.style.border= "1px red solid";
Head.style.backgroundcolor= "Blue";
Head.style.height= "5%";
Move.style.width= "90%";
Move.style.height= "100%";
Close.style.height= "100%";
Close.style.overflow= "hidden";
Close.style.whitespace= "nowrap";
Close.style.backgroundcolor= "Yellow";
Body.style.height= "93%";
Body.style.width= "100%";
body.style.overflow= "Auto";
a.style.position= "Absolute";
close.style.position= "Absolute";
Close.style.cursor= "Hand";
close.style.top=0+ "px";
close.style.right=0+ "px";
Close.onclick=function () {
Window.event.cancelbubble=true;
var q=a.offsetheight;
var h=window.setinterval (function () {
if (Math.Abs (q) >=0) {
a.style.height=q+ "px";
Q=q-step;
if (Math.Abs (q) <step) {
e.style.height=q+ "px";
Window.clearinterval (h);
Window.settimeout (function () {
alert (This==window);
Close.style.cursor= "Normal";
A.parentnode.removechild (a);
a.style.lineheight= "0px";
},10);
}
}else{
Window.clearinterval (h);
A.style.display= "None";
}
},T);
}
Move.onmousedown=function () {
this.move=1;
This.x=window.event.offsetx;
alert (this.x);
This.y=window.event.offsety;
This.setcapture ();
}
Move.onmousemove=function () {
This.style.cursor= "Move";
if (window.event.clientx<=0 | | window.event.clienty<=0 | | window.event.clientx>=document.body.clientwidth | | Window.event.clienty>=document.body.clientheight) {return false;}
if (this.move==1) {
this.parentnode.parentnode.style.left=window.event.clientx-this.x+ "px";
this.parentnode.parentnode.style.top=window.event.clienty-this.y+ "px";
This.setcapture ();
}
}
Move.onmouseup=function () {
if (this.move==1) {
this.move=0;
This.style.cursor= "Normal";
This.releasecapture ();
}
}
A.onmousemove=function () {
if (this.move==1) {
if (window.event.clientx-this.offsetleft<2 | | window.event.clienty-this.offsettop<2) return FALSE;
this.style.width=window.event.clientx-this.offsetleft+ "px";
this.style.height=window.event.clienty-this.offsettop+ "px";
close.style.right= "0px";
This.setcapture ();
}
else{
if (window.event.offsetx-this.offsetwidth>-6 && window.event.offsety-this.offsetheight>-6)
This.style.cursor= "Nw-resize";
Else
This.style.cursor= "Default";
}
}
A.onmouseup=function () {
if (this.move==1) {
this.move=0;
This.releasecapture ();
}
}
A.onmousedown=function () {
if (this.style.cursor== "Nw-resize") {
this.move=1;
This.setcapture ();
}
}
body.innerhtml=html;
return A;
}
The code is not complex, mainly what Onmousedown,onmousemove,onmouseup is written. I resize the principle when you move your mouse to the lower-right corner of the layer, the mouse pointer changes, and when you press the mouse and move, the current layer is setcapture, Moving the mouse layer will resize with the mouse position and release the mouse releasecapture.
The parameter of the function step is the number of steps you have to move each time interval when you press the close, and T is the time interval, and HTML is the HTML code you want to insert into the body layer.
Give an example of an invocation:
Copy Code code as follows:
<title>untitled document</title>
<body>
<mce:script src= "Kongjian.js" mce_src= "Kongjian.js" ></mce:script>
<mce:script type= "Text/javascript" ><!--
var a=sx.activex.windowex.init (10,10, "A.contenteditable=true;
a.style.bottom= "0px";
a.style.right= "0px";
Document.body.appendChild (a);
--></mce:script>
</body>
Where the code has bugs, please forgive us.
