<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> | |
<title>完美的javascript模态窗口拖动、拖放大小</title> | |
<style> | |
*{margin:0;padding:0;} | |
#zhezhao{ | |
width:100%; | |
height:100%; | |
background:#f00; | |
filter:alpha(opacity:0); | |
opacity:0; | |
z-index:9999; | |
position:absolute; | |
top:0; | |
left:0; | |
display:none; | |
} | |
#div2{ | |
width:200px; | |
height:200px; | |
position:relative; | |
background:#EEEEEE; | |
border:1px solid #f00; | |
} | |
#div1{ | |
width:15px; | |
height:15px; | |
background:#99CC00; | |
position:absolute; | |
right:0px; | |
bottom:0px; | |
cursor:nw-resize; | |
overflow:hidden; | |
font-size:12px; | |
text-align:center; | |
line-height:15px; | |
color:#FFFFFF; | |
float:right; | |
z-index:3; | |
} | |
#right{ | |
width:15px; | |
height:100%; | |
background:#f00; | |
float:right; | |
position:absolute; | |
right:0; | |
top:0; | |
cursor:e-resize; | |
overflow:hidden; | |
filter:alpha(opacity:0); | |
opacity:0; | |
z-index:1; | |
} | |
#bottom{ | |
width:100%; | |
height:15px; | |
background:#f00; | |
position:absolute; | |
left:0; | |
bottom:0; | |
cursor:n-resize; | |
overflow:hidden; | |
filter:alpha(opacity:0); | |
opacity:0; | |
z-index:1; | |
} | |
#div2 p{ | |
padding:10px; | |
line-height:24px; | |
font-size:13px; | |
text-indent:24px; | |
color:#996600; | |
} | |
#div2 h2{ | |
width:100%; | |
height:25px; | |
line-height:25px; | |
font-size:14px; | |
background:#CC9900; | |
color:#FFFFFF; | |
text-indent:15px; | |
cursor:move; | |
overflow:hidden; | |
} | |
</style> | |
<script type="text/javascript"> | |
window.οnlοad=function() | |
{ | |
var oDiv=document.getElementById("div1"); | |
var oDiv2=document.getElementById("div2"); | |
var zhezhao=document.getElementById("zhezhao"); | |
var h2=oDiv2.getElementsByTagName("h2")[0]; | |
var right=document.getElementById("right"); | |
var bottom=document.getElementById("bottom"); | |
var mouseStart={}; | |
var divStart={}; | |
var rightStart={}; | |
var bottomStart={}; | |
//往右拽 | |
right.οnmοusedοwn=function(ev) | |
{ | |
var oEvent=ev||event; | |
mouseStart.x=oEvent.clientX; | |
mouseStart.y=oEvent.clientY; | |
rightStart.x=right.offsetLeft; | |
if(right.setCapture) | |
{ | |
right.οnmοusemοve=doDrag1; | |
right.οnmοuseup=stopDrag1; | |
right.setCapture(); | |
} | |
else | |
{ | |
document.addEventListener("mousemove",doDrag1,true); | |
document.addEventListener("mouseup",stopDrag1,true); | |
} | |
}; | |
function doDrag1(ev) | |
{ | |
var oEvent=ev||event; | |
var l=oEvent.clientX-mouseStart.x+rightStart.x; | |
var w=l+oDiv.offsetWidth; | |
if(w<oDiv.offsetWidth) | |
{ | |
w=oDiv.offsetWidth; | |
} | |
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft) | |
{ | |
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2; | |
} | |
oDiv2.style.width=w+"px"; | |
}; | |
function stopDrag1() | |
{ | |
if(right.releaseCapture) | |
{ | |
right.οnmοusemοve=null; | |
right.οnmοuseup=null; | |
right.releaseCapture(); | |
} | |
else | |
{ | |
document.removeEventListener("mousemove",doDrag1,true); | |
document.removeEventListener("mouseup",stopDrag1,true); | |
} | |
}; | |
//往下拽 | |
bottom.οnmοusedοwn=function(ev) | |
{ | |
var oEvent=ev||event; | |
mouseStart.x=oEvent.clientX; | |
mouseStart.y=oEvent.clientY; | |
bottomStart.y=bottom.offsetTop; | |
if(bottom.setCapture) | |
{ | |
bottom.οnmοusemοve=doDrag2; | |
bottom.οnmοuseup=stopDrag2; | |
bottom.setCapture(); | |
} | |
else | |
{ | |
document.addEventListener("mousemove",doDrag2,true); | |
document.addEventListener("mouseup",stopDrag2,true); | |
} | |
}; | |
function doDrag2(ev) | |
{ | |
var oEvent=ev||event; | |
var t=oEvent.clientY-mouseStart.y+bottomStart.y; | |
var h=t+oDiv.offsetHeight; | |
if(h<oDiv.offsetHeight) | |
{ | |
h=oDiv.offsetHeight; | |
} | |
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop) | |
{ | |
h=document.documentElement.clientHeight-oDiv2.offsetTop-2; | |
} | |
oDiv2.style.height=h+"px"; | |
}; | |
function stopDrag2() | |
{ | |
if(bottom.releaseCapture) | |
{ | |
bottom.οnmοusemοve=null; | |
bottom.οnmοuseup=null; | |
bottom.releaseCapture(); | |
} | |
else | |
{ | |
document.removeEventListener("mousemove",doDrag2,true); | |
document.removeEventListener("mouseup",stopDrag2,true); | |
} | |
}; | |
//往左右同时拽 | |
oDiv.οnmοusedοwn=function(ev) | |
{ | |
var oEvent=ev||event; | |
mouseStart.x=oEvent.clientX; | |
mouseStart.y=oEvent.clientY; | |
divStart.x=oDiv.offsetLeft; | |
divStart.y=oDiv.offsetTop; | |
if(oDiv.setCapture) | |
{ | |
oDiv.οnmοusemοve=doDrag; | |
oDiv.οnmοuseup=stopDrag; | |
oDiv.setCapture(); | |
} | |
else | |
{ | |
document.addEventListener("mousemove",doDrag,true); | |
document.addEventListener("mouseup",stopDrag,true); | |
} | |
zhezhao.style.display='block'; | |
}; | |
function doDrag(ev) | |
{ | |
var oEvent=ev||event; | |
var l=oEvent.clientX-mouseStart.x+divStart.x; | |
var t=oEvent.clientY-mouseStart.y+divStart.y; | |
var w=l+oDiv.offsetWidth; | |
var h=t+oDiv.offsetHeight; | |
if(w<oDiv.offsetWidth) | |
{ | |
w=oDiv.offsetWidth; | |
} | |
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft) | |
{ | |
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2; | |
} | |
if(h<oDiv.offsetHeight) | |
{ | |
h=oDiv.offsetHeight; | |
} | |
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop) | |
{ | |
h=document.documentElement.clientHeight-oDiv2.offsetTop-2; | |
} | |
oDiv2.style.width=w+"px"; | |
oDiv2.style.height=h+"px"; | |
}; | |
function stopDrag() | |
{ | |
if(oDiv.releaseCapture) | |
{ | |
oDiv.οnmοusemοve=null; | |
oDiv.οnmοuseup=null; | |
oDiv.releaseCapture(); | |
} | |
else | |
{ | |
document.removeEventListener("mousemove",doDrag,true); | |
document.removeEventListener("mouseup",stopDrag,true); | |
} | |
zhezhao.style.display='none'; | |
}; | |
//h2完美拖拽 | |
h2.οnmοusedοwn=function(ev) | |
{ | |
var oEvent=ev||event; | |
mouseStart.x=oEvent.clientX; | |
mouseStart.y=oEvent.clientY; | |
divStart.x=oDiv2.offsetLeft; | |
divStart.y=oDiv2.offsetTop; | |
if(h2.setCapture) | |
{ | |
h2.οnmοusemοve=doDrag3; | |
h2.οnmοuseup=stopDrag3; | |
h2.setCapture(); | |
} | |
else | |
{ | |
document.addEventListener("mousemove",doDrag3,true); | |
document.addEventListener("mouseup",stopDrag3,true); | |
} | |
zhezhao.style.display='block'; | |
}; | |
function doDrag3(ev) | |
{ | |
var oEvent=ev||event; | |
var l=oEvent.clientX-mouseStart.x+divStart.x; | |
var t=oEvent.clientY-mouseStart.y+divStart.y; | |
if(l<0) | |
{ | |
l=0; | |
} | |
else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth) | |
{ | |
l=document.documentElement.clientWidth-oDiv2.offsetWidth; | |
} | |
if(t<0) | |
{ | |
t=0; | |
} | |
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight) | |
{ | |
t=document.documentElement.clientHeight-oDiv2.offsetHeight; | |
} | |
oDiv2.style.left=l+"px"; | |
oDiv2.style.top=t+"px"; | |
}; | |
function stopDrag3() | |
{ | |
if(h2.releaseCapture) | |
{ | |
h2.οnmοusemοve=null; | |
h2.οnmοuseup=null; | |
h2.releaseCapture(); | |
} | |
else | |
{ | |
document.removeEventListener("mousemove",doDrag3,true); | |
document.removeEventListener("mouseup",stopDrag3,true); | |
} | |
zhezhao.style.display='none'; | |
} | |
}; | |
</script> | |
</head> | |
<body> | |
<div id="div2"> | |
<div style="width:100%; height:100%; overflow:hidden;"> | |
<h2>完美的拖拽</h2> | |
<p>体验不错的JavaScript网页拖动,除了拖动,还可拖动放大,像Windows窗口一样被放大或缩小,只要按住层的右下角,就可以收放自如的放大或缩小。想使用的朋友,可将代码里的Js封装成类,从外部引入想必更合理些。'</p> | |
<p>烈火学院 Liehuo.Net</p> | |
<div id="right"></div> | |
<div id="div1">拖</div> | |
<div id="bottom"></div> | |
</div> | |
</div> | |
<div id="zhezhao"></div> | |
</body> | |
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center> |
完美的javascript模态窗口拖动、拖放大小
最新推荐文章于 2019-12-04 17:24:44 发布