Friends who often visit QQ space must be deeply impressed by the personalized editing module of QQ space. You can drag elements on the page and adjust the size to achieve dynamic layout. Of course, every time I go to the csdn blog, I will also see a news window in the lower right corner. This effect is really cool, so let’s implement one too.
Implementation steps:
1. First, dynamically create an html structure similar to this:
2. The div container with the id of body is the div container where you want to place the content, move is the movable span, and close is to close the window (layer to be precise).
3. Then bind the event to these objects. Take a look at the code specifically.
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)//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 complicated. It mainly consists of writing onmousedown, onmousemove, and onmouseup. The principle of my resizing is that when you move the mouse to the lower right corner of the layer, the mouse pointer changes. When you press the mouse and move it, it will Setcapture the current layer, move the mouse and the layer will resize according to the position of the mouse. Release the mouse to releasecapture. The parameter step of the
function is the number of steps to move at each time interval when you press close, and t is the time. Interval, html is the html code you want to insert into the body layer.
Here is a call example:
Untitled Document
< body>
