首页 > 网络编程 > JavaScript > javascript技巧 > div页面拖动

有关div页面拖动、缩放、关闭、遮罩效果代码

2009-08-23 15:54:31 作者：

有关div页面拖动、缩放、关闭、遮罩效果代码,比较不错，适合学习用。

<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>UntitledDocument</title> 
<style><!-- 
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ 
position:absolute; 
background:#00F; 
width:3px; 
height:3px; 
z-index:6; 
font-size:0; 
}

#rLeftDown,#rRightUp{cursor:ne-resize;} 
#rRightDown,#rLeftUp{cursor:nw-resize;} 
#rRight,#rLeft{cursor:e-resize;} 
#rUp,#rDown{cursor:n-resize;}

#rLeftDown{left:-4px;bottom:-4px;} 
#rRightUp{right:-4px;top:-4px;} 
#rRightDown{right:-4px;bottom:-4px;background-color:#00F;} 
#rLeftUp{left:-4px;top:-4px;} 
#rRight{right:-4px;top:50%;margin-top:-4px;} 
#rLeft{left:-4px;top:50%;margin-top:-4px;} 
#rUp{top:-4px;left:50%;margin-left:-4px;} 
#rDown{bottom:-4px;left:50%;margin-left:-4px;} 
--></style><style bogus="1">#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ 
position:absolute; 
background:#00F; 
width:3px; 
height:3px; 
z-index:6; 
font-size:0; 
}

#rLeftDown,#rRightUp{cursor:ne-resize;} 
#rRightDown,#rLeftUp{cursor:nw-resize;} 
#rRight,#rLeft{cursor:e-resize;} 
#rUp,#rDown{cursor:n-resize;}

#rLeftDown{left:-4px;bottom:-4px;} 
#rRightUp{right:-4px;top:-4px;} 
#rRightDown{right:-4px;bottom:-4px;background-color:#00F;} 
#rLeftUp{left:-4px;top:-4px;} 
#rRight{right:-4px;top:50%;margin-top:-4px;} 
#rLeft{left:-4px;top:50%;margin-top:-4px;} 
#rUp{top:-4px;left:50%;margin-left:-4px;} 
#rDown{bottom:-4px;left:50%;margin-left:-4px;}</style> 
<script type="text/javascript"><!-- 
function createIframe(){

//mask遮罩层 
var newMask=document.createElement("div");

newMask.id="mDiv"; 
newMask.style.position="absolute"; 
newMask.style.zIndex="1";

_scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); 
_scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);

newMask.style.width=_scrollWidth+"px"; 
newMask.style.height=_scrollHeight+"px";

newMask.style.top="0px"; 
newMask.style.left="0px";

newMask.style.background = "#FFFFFF"; 
newMask.style.filter="alpha(opacity=10)"; 
newMask.style.opacity="0.10"; 
newMask.style.display='none';

// create div 
var objDiv=document.createElement("div");

objDiv.id="div1"; 
objDiv.name="div1";

objDiv.style.width="480px"; 
objDiv.style.height="204px";

objDiv.style.left=(_scrollWidth-480)/2+"px"; 
objDiv.style.top=(_scrollHeight-204)/2+"px";

objDiv.style.position="absolute"; 
objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上 
objDiv.style.display="none"; //让objDiv预先隐藏 
objDiv.style.backgroundColor = "#55A0FF";

//添加top上面内容 
var str = ""; 
str = str + '<div style = "position:absolute;height:20px;z-index:3;top:0;font:新宋体; font-size:13pt;color:#FFFFFF;">有关DIV 拖动、缩放、遮罩效果</div>'; 
str = str + '<div id ="drag" style = "position:absolute;height:20px;width:100%;z-index:4;top:0;background-color:#FFFFFF;filter:alpha(opacity=10);opacity:0.10;"></div>'; 
str = str + '<input id="objClose" style = "position:absolute;height:20px;width:20px;z-index:5;top:0;font-size:13pt;right:0;border:solid #FFFFFF 1px; background-color:#FF0000;color:#FFFFFF;" type = "button" value="X" onclick = "HideIframe(document.getElementById(\'mDiv\'),document.getElementById(\'div1\'));" onmouseover="handleOver()" onmouseout="handleOut()"/>'; 
str = str + '<div id="rLeftDown" onmousedown="moveStart(this);" onmousemove="moving(this,6);"onmouseup="moveEnd(this);" ></div>';//左下角div 
str = str + '<div id="rRightUp"onmousedown="moveStart(this);" onmousemove="moving(this,2);"onmouseup="moveEnd(this);" ></div>';//右上角div 
str = str + '<div id="rRightDown" onmousedown="moveStart(this);" onmousemove="moving(this,4);"onmouseup="moveEnd(this);" ></div>';//右下角div 
str = str + '<div id="rLeftUp" onmousedown="moveStart(this);" onmousemove="moving(this,0);"onmouseup="moveEnd(this);" ></div>';//左上角div 
str = str + '<div id="rRight" onmousedown="moveStart(this);" onmousemove="moving(this,3);"onmouseup="moveEnd(this);" ></div>';//右边div 
str = str + '<div id="rLeft" onmousedown="moveStart(this);" onmousemove="moving(this,7);"onmouseup="moveEnd(this);" ></div>';//左边div 
str = str + '<div id="rUp"onmousedown="moveStart(this);" onmousemove="moving(this,1);"onmouseup="moveEnd(this);" ></div>';//上边div 
str = str + '<div id="rDown"onmousedown="moveStart(this);" onmousemove="moving(this,5);"onmouseup="moveEnd(this);" ></div>';//下边div

objDiv.innerHTML = str;

//添加边框样式 
objDiv.style.border="solid #0033FF 3px;"; 
objDiv.style.borderTop = "2px solid #55A0FF"; 
objDiv.style.borderLeft = "2px solid #55A0FF"; 
objDiv.style.borderRight = "2px solid #55A0FF"; 
objDiv.style.borderBottom = "2px solid #55A0FF";

//create iframe 
var frm=document.createElement("iframe"); 
frm.id="ifrm"; 
frm.name="ifrm"; 
frm.style.position="absolute"; 
frm.style.width="100%"; 
frm.style.height=180; 
frm.style.top=20; 
frm.style.display=''; 
frm.frameborder=0; 
objDiv.appendChild(frm);

document.body.appendChild(newMask); 
document.body.appendChild(objDiv);

//实现拖动效果 
var objDrag=document.getElementById("drag"); 
var drag=false; 
var dragX=0; 
var dragY=0;

objDrag.attachEvent("onmousedown",startDrag); 
function startDrag(){ 
if(event.button == 1 && event.srcElement.tagName.toUpperCase() == "DIV"){ 
objDrag.setCapture(); 
objDrag.style.cursor = "move"; 
objDrag.style.zIndex = "1001";

drag = true; 
dragX = event.clientX; 
dragY = event.clientY;

event.cancelBubble=true; 
event.returnValue=false; 
} 
};

objDrag.attachEvent("onmousemove",Drag); 
function Drag(){ 
if(drag){ 
var oldwin = objDrag.parentNode; 
oldwin.style.left = oldwin.offsetLeft + event.clientX - dragX; 
oldwin.style.top = oldwin.offsetTop + event.clientY - dragY;

dragX = event.clientX; 
dragY = event.clientY; 
} 
};

objDrag.attachEvent("onmouseup",stopDrag); 
function stopDrag(){ 
objDrag.style.zIndex = "4"; 
objDrag.style.cursor = "default";

objDrag.releaseCapture(); 
drag=false; 
};

} 
//关闭按钮样式 
function handleOut(){ 
var objButton = document.getElementById("objClose"); 
objButton.style.backgroundColor = "#FF0000"; 
objButton.style.zIndex = "5"; 
}

function handleOver(){ 
var objButton = document.getElementById("objClose"); 
objButton.style.backgroundColor = "#FF8080"; 
objButton.style.zIndex = "1001"; 
} 
//添加iframe内容 
function htmlEditor(){ 
var frm=document.getElementById("ifrm"); 
var objDiv=document.getElementById("div1"); 
var mDiv=document.getElementById("mDiv");

mDiv.style.display=''; 
var iframeTextContent=''; 
iframeTextContent+=' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'; 
iframeTextContent+=' <html xmlns="http://www.w3.org/1999/xhtml">'; 
iframeTextContent+=' <head>'; 
iframeTextContent+=' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />'; 
iframeTextContent+=' </head>'; 
iframeTextContent+=' <body>'; 
iframeTextContent+=' <table>'; 
iframeTextContent+=' <tr>'; 
iframeTextContent+=' <td>Name </td>'; 
iframeTextContent+=' <td> <input type="text" value="" /> </td>'; 
iframeTextContent+=' </tr>'; 
iframeTextContent+=' <tr>'; 
iframeTextContent+=' <td>Email </td>'; 
iframeTextContent+=' <td> <input type="text" value="" /> </td>'; 
iframeTextContent+=' </tr>'; 
iframeTextContent+=' <tr>'; 
iframeTextContent+=' <td> <input type="button" id="btGo" value="Go" /> </td>'; 
iframeTextContent+=' </tr>'; 
iframeTextContent+=' </table>'; 
iframeTextContent+=' </body>'; 
iframeTextContent+=' </html>'; 
frm.contentWindow.document.designMode='off'; 
frm.contentWindow.document.open(); 
frm.contentWindow.document.write(iframeTextContent); 
frm.contentWindow.document.close(); 
objDiv.style.display = ""; //显示浮动的div

//点击go按钮关闭页面 
var objGo=frm.contentWindow.document.getElementById("btGo"); 
objGo.attachEvent("onclick",function (){HideIframe(mDiv,objDiv);}); 
}

//关闭页面 
function HideIframe(mDiv,objDiv){

mDiv.style.display='none'; 
objDiv.style.display = "none"; //隐藏浮动的div 
}

//实现缩放效果 
var down = 0; 
function moveStart(obj){ 
var objDiv = obj.parentNode; 
obj.setCapture(); 
obj.style.zIndex = "1001"; 
down = 1;

_styleWidth = objDiv.clientWidth; 
_styleHeight = objDiv.clientHeight; 
_styleLeft = objDiv.offsetLeft; 
_styleTop = objDiv.offsetTop;

_sideLeft = event.clientX - _styleWidth; 
_sideRight = event.clientX + _styleWidth; 
_sideUp = event.clientY - _styleHeight; 
_sideDown = event.clientY + _styleHeight;

_fixLeft = _styleWidth + _styleLeft; 
_fixTop = _styleHeight + _styleTop;

event.cancelBubble = true; 
event.returnValue = false; 
}

function moving(obj,num){ 
if(down){ 
var objDiv = obj.parentNode; 
var frm = document.getElementById("ifrm"); 
switch(num){ 
//左上角 
case 0: 
_styleWidth = Math.max(xx = _sideRight - event.clientX,0); 
objDiv.style.width = _styleWidth; 
objDiv.style.left = _fixLeft - _styleWidth; 
_styleHeight = Math.max(yy = _sideDown - event.clientY,0); 
objDiv.style.height = _styleHeight; 
objDiv.style.top = _fixTop - _styleHeight; 
try{ 
frm.style.width = (xx - 4) + "px"; 
frm.style.height = (yy - 24) + "px"; 
}catch(e){} 
break;

//上边 
case 1: 
_styleHeight = Math.max(yy = _sideDown - event.clientY,0); 
objDiv.style.height = _styleHeight; 
objDiv.style.top = _fixTop - _styleHeight; 
try{ 
frm.style.height = (yy - 24) + "px"; 
}catch(e){} 
break;

//右上角 
case 2: 
_styleWidth = Math.max(xx = event.clientX - _sideLeft,0); 
objDiv.style.width = _styleWidth; 
_styleHeight = Math.max(yy = _sideDown - event.clientY,0); 
objDiv.style.height = _styleHeight; 
objDiv.style.top = _fixTop - _styleHeight; 
try{ 
frm.style.width = (xx - 4) + "px"; 
frm.style.height = (yy - 24) + "px"; 
}catch(e){} 
break;

//右边 
case 3: 
_styleWidth = Math.max(xx = event.clientX - _sideLeft,0); 
objDiv.style.width = _styleWidth; 
try{ 
frm.style.width = (xx - 4) + "px"; 
}catch(e){} 
break;

//右下角 
case 4: 
_styleWidth = Math.max(xx = event.clientX - _sideLeft,0); 
objDiv.style.width = _styleWidth; 
_styleHeight = Math.max(yy = event.clientY - _sideUp,0); 
objDiv.style.height = _styleHeight; 
try{ 
frm.style.width = (xx - 4) + "px"; 
frm.style.height = (yy - 24) + "px"; 
}catch(e){} 
break;

//下边 
case 5: 
_styleHeight = Math.max(yy = event.clientY - _sideUp,0); 
objDiv.style.height = _styleHeight; 
try{ 
frm.style.height = (yy - 24) + "px"; 
}catch(e){} 
break;

//左下角 
case 6: 
_styleWidth = Math.max(xx = _sideRight - event.clientX,0); 
objDiv.style.width = _styleWidth; 
objDiv.style.left = _fixLeft - _styleWidth; 
_styleHeight = Math.max(yy = event.clientY - _sideUp,0); 
objDiv.style.height = _styleHeight; 
try{ 
frm.style.width = (xx - 4) + "px"; 
frm.style.height = (yy - 24) + "px"; 
}catch(e){} 
break;

//左边 
case 7: 
_styleWidth = Math.max(xx = _sideRight - event.clientX,0); 
objDiv.style.width = _styleWidth; 
objDiv.style.left = _fixLeft - _styleWidth; 
try{ 
frm.style.width = (xx - 4) + "px"; 
}catch(e){} 
break; 
}; 
} 
}

function moveEnd(obj){ 
down = 0; 
obj.style.cursor = "default"; 
obj.style.zIndex = "6"; 
obj.releaseCapture(); 
}; 
// --></script> 
</head>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]