javascript實現(xiàn)div的拖動并調(diào)整大小類似qq空間個性編輯模塊
更新時間:2012年12月12日 10:33:35 作者:
qq空間的個性編輯模塊可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局;這種效果的確很酷,那么我們也來實現(xiàn)一個吧
經(jīng)常上qq空間的朋友一定對qq空間的個性編輯模塊印象深刻,可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局,當然我每次上csdn博客也會在右下角看見一個新聞窗口,這種效果的確很酷,那么我們也來實現(xiàn)一個吧.
實現(xiàn)步驟:
1.首先是動態(tài)創(chuàng)建一個類似這樣的html結(jié)構(gòu):
<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">關(guān)閉</span>
</div>
<div id="body" style="width:100%;height:90%"></div>
</div>
2.id為body的為你要放置內(nèi)容的div容器,move是可移動的span,close是關(guān)閉這個窗口(準確說是層).
3.然后將事件綁定到這些對象上.具體看一下代碼.
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="關(guān)閉";
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;
}
代碼也不復(fù)雜,主要是什么onmousedown,onmousemove,onmouseup的編寫.我調(diào)整大小的原理當?shù)哪闶髽艘苿拥綄拥挠蚁陆菚r,鼠標指針改變,這時按下鼠標并且移動時,會將當前層setcapture,移動鼠標層會隨鼠標的位置而調(diào)整大小,松開鼠標releasecapture.
函數(shù)的參數(shù)step是你按下關(guān)閉時每次時間間隔移動的步數(shù),t是時間間隔,html是你要插入到body層里的html代碼.
一下給出一個調(diào)用例子:
<html>
<head>
<title>Untitled Document</title>
</head>
<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,"<img src="1.jpg" mce_src="1.jpg" height=500 width=500>");
//a.contentEditable=true;
a.style.bottom="0px";
a.style.right="0px";
document.body.appendChild(a);
// --></mce:script>
</body>
</html>
代碼有bug的地方還請大家多多包涵.
實現(xiàn)步驟:
1.首先是動態(tài)創(chuàng)建一個類似這樣的html結(jié)構(gòu):
復(fù)制代碼 代碼如下:
<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">關(guān)閉</span>
</div>
<div id="body" style="width:100%;height:90%"></div>
</div>
2.id為body的為你要放置內(nèi)容的div容器,move是可移動的span,close是關(guān)閉這個窗口(準確說是層).
3.然后將事件綁定到這些對象上.具體看一下代碼.
復(fù)制代碼 代碼如下:
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="關(guān)閉";
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;
}
代碼也不復(fù)雜,主要是什么onmousedown,onmousemove,onmouseup的編寫.我調(diào)整大小的原理當?shù)哪闶髽艘苿拥綄拥挠蚁陆菚r,鼠標指針改變,這時按下鼠標并且移動時,會將當前層setcapture,移動鼠標層會隨鼠標的位置而調(diào)整大小,松開鼠標releasecapture.
函數(shù)的參數(shù)step是你按下關(guān)閉時每次時間間隔移動的步數(shù),t是時間間隔,html是你要插入到body層里的html代碼.
一下給出一個調(diào)用例子:
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Untitled Document</title>
</head>
<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,"<img src="1.jpg" mce_src="1.jpg" height=500 width=500>");
//a.contentEditable=true;
a.style.bottom="0px";
a.style.right="0px";
document.body.appendChild(a);
// --></mce:script>
</body>
</html>
代碼有bug的地方還請大家多多包涵.
相關(guān)文章
自己寫的兼容ie和ff的在線文本編輯器類似ewebeditor
最近寫了個在線的編輯器,類似ewebeditor那樣的,當然沒有人家那么強大,但是基本功能都有,而且還是兼容ie和ff的,需要的朋友可以參考下2012-12-12table 隔列(行)換色效果讓表格結(jié)構(gòu)更清淅
table 隔列換色效果,很實用的一款網(wǎng)頁特效代碼,用隔行換色來修飾表格,可讓表格結(jié)構(gòu)更清淅,也更加美觀,是一個十分流行的表格特效,在網(wǎng)頁中有利于提高用戶體驗,是一個很不錯的效果,需要的朋友可以參考下2012-12-12