javascript實現div的拖曳並調整大小類似qq空間個性編輯模組_其他特效

經常上qq空間的朋友一定對qq空間的個性編輯模組印象深刻,可以隨意的拖動頁面上的元素並且調動大小實現動態佈局,當然我每次上csdn博客也會在右下角看見一個新聞窗口,這種效果的確很酷,那麼我們也來實現一個吧.

實現步驟:
1.首先是動態創建一個類似這樣的html結構:

複製程式碼 程式碼如下:

關閉
div>

2.id為body的為你要放置內容的div容器,move是可移動的span,close是關閉這個視窗(準確地說是層).
3.然後將事件綁定到這些物件上.具體看一下程式碼.

複製程式碼 程式碼如下:

sx.activex.windowex={ 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="關閉";
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=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.offsetLeftthis.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;
}


程式碼也不複雜,主要是什麼onmousedown,onmousemove,onmouseup的編寫.我調整大小的原理當的你滑鼠移動到層的右下角時,滑鼠指標改變,這時按下滑鼠並且移動時,會將目前圖層setcapture,移動滑鼠圖層會隨滑鼠的位置而調整大小,放開滑鼠releasecapture.

函數的參數step是你按下關閉時每次時間間隔移動的步數,t是時間間隔,html是你要插入body層裡的html程式碼.
一下給一個呼叫範例:

複製程式碼

複製程式碼

程式碼如下:











程式碼有bug的地方還請大家多多包涵.