软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：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>

技术文章快速查找

解决jQuery插件tipswindown与hintbox冲突

Javascript简单实现可拖动的div

JavaScript中的字符串操作详解

Android中资源文件(非代码部分)的使用概览

JS 实现导航栏悬停效果

js 函数的副作用分析

jquery获取元素值的方法(常见的表单元素)

Jquery插件写法笔记整理

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建