弹出层，随意拖拽的网页弹出框JS特效

最新推荐文章于 2024-05-14 13:35:49 发布

wellway

最新推荐文章于 2024-05-14 13:35:49 发布

阅读量3.8k

点赞数

分类专栏： css

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>弹出层随意拖拽JS特效</title>
<style type="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(/jscss/demoimg/201301/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}
#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
#drag .title{position:relative;height:27px;margin:5px;}
#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
#drag .title div{position:absolute;height:19px;top:2px;right:0;}
#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(/jscss/demoimg/201301/tool.png) no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
a.open:hover{background-position:0 -29px;}
#drag .title a.min{background-position:-29px 0;}
#drag .title a.min:hover{background-position:-29px -29px;}
#drag .title a.max{background-position:-60px 0;}
#drag .title a.max:hover{background-position:-60px -29px;}
#drag .title a.revert{background-position:-149px 0;display:none;}
#drag .title a.revert:hover{background-position:-149px -29px;}
#drag .title a.close{background-position:-89px 0;}
#drag .title a.close:hover{background-position:-89px -29px;}
#drag .content{overflow:auto;margin:0 5px;}
#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(/jscss/demoimg/201301/resize.png) no-repeat;}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}
#drag .resizeR{right:0;}
#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}
#drag .resizeT{top:0;}
#drag .resizeB{bottom:0;}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}
#drag .resizeLT{top:0;left:0;cursor:nw-resize;}
#drag .resizeTR{top:0;right:0;cursor:ne-resize;}
#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}
</style>
<script type="text/javascript">
// 获取id, class, tagName
var get = {
byId: function(id) {
return typeof id === "string" ? document.getElementById(id) : id;
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass;
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
}
//窗口拖拽

function drag(oDrag,oTitle){
var posX=posY=0;
var oMin = get.byClass("min",oDrag)[0];
var oMax = get.byClass("max",oDrag)[0];
var oRevert = get.byClass("revert",oDrag)[0];
var oClose = get.byClass("close",oDrag)[0];
var RevertWidth=300;
var RevertHeight=160;
oTitle.οnmοusedοwn=function(event){
oTitle.style.cursor = "move";
var event = event || window.event;
var disX=event.clientX-oDrag.offsetLeft;
var disY=event.clientY-oDrag.offsetTop;
//鼠标移动，窗口随之移动 onmousemove在有物体移动是才执行alert事件；
document.οnmοusemοve=function(event){
var event = event || window.event;
maxW=document.documentElement.clientWidth-oDrag.offsetWidth;
maxH=document.documentElement.clientHeight-oDrag.offsetHeight;
posX=event.clientX-disX;
posY=event.clientY-disY;
if(posX<0){
posX=0;
}else if(posX>maxW){
posX=maxW;
}
if(posY<0){
posY=0;
}else if(posY>maxH){
posY=maxH;
}
oDrag.style.left=posX+'px';
oDrag.style.top=posY+'px';
}
//鼠标松开，窗口将不再移动
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
//最小化按钮
oMin.οnclick=function(){
oDrag.style.display='none';
var obut=document.createElement('a');
obut.className='open';
obut.href='javascript:;';
obut.title='还原';
document.body.appendChild(obut);
obut.οnclick=function(){
oDrag.style.display='block';
document.body.removeChild(this);
this.οnclick=null;
}
}
//最大化按钮
oMax.οnclick=function(){
oDrag.style.left=oDrag.style.top=0;
oDrag.style.width=document.documentElement.clientWidth-2+'px';
oDrag.style.height=document.documentElement.clientHeight-2+'px';
this.style.display='none';
oRevert.style.display='block';
}
//还原按钮
oRevert.οnclick=function(){
oDrag.style.width=RevertWidth+'px';
oDrag.style.height=RevertHeight+'px';
oDrag.style.left=(document.documentElement.clientWidth-oDrag.offsetWidth)/2+"px";
oDrag.style.top=(document.documentElement.clientHeight-oDrag.offsetHeight)/2+"px";
this.style.display='none';
oMax.style.display='block';
}
//点击关闭按钮
oClose.οnclick=function(){
oDrag.style.display='none';
this.οnclick=null;
}
}
window.onload = function (){
var oDrag = document.getElementById("drag");
var oTitle = get.byClass("title", oDrag)[0];
drag(oDrag, oTitle);
}
</script>
</head>

<body>
<div id="drag">
<div class="title">
<h2>这是一个可以拖动的窗口</h2>
<div>
<a class="min" href="javascript:;" title="最小化"></a>
<a class="max" href="javascript:;" title="最大化"></a>
<a class="revert" href="javascript:;" title="还原"></a>
<a class="close" href="javascript:;" title="关闭"></a>
</div>
</div>
<div class="resizeL"></div>
<div class="resizeT"></div>
<div class="resizeR"></div>
<div class="resizeB"></div>
<div class="resizeLT"></div>
<div class="resizeTR"></div>
<div class="resizeBR"></div>
<div class="resizeLB"></div>
<div class="content">
① 窗口可以拖动；<br />
② 窗口可以通过八个方向改变大小；<br />
③ 窗口可以最小化、最大化、还原、关闭；<br />
④ 限制窗口最小宽度/高度。
</div>
</div>
</body>
</html>

wellway

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
弹出层，随意拖拽的网页弹出框JS特效

弹出层随意拖拽JS特效 body,div,h2{margin:0;padding:0;}body{background:url(/jscss/demoimg/201301/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}#drag{position:absolute;top:100px;left:100px;width:
复制链接

扫一扫