div弹出对话框（动画效果）
JS代码
文件名称:my400800.cn.js
var menuOC=function()
{
this.menuPoint={prox:null,proy:null,proxc:null,proyc:null,width:null,height:null};
this.menuObj=document.getElementById(arguments[0]);
this.menuMask=null;
this.canMove=false;
this.getMaxWH();
if(arguments[1])
{
this.canMove=arguments[1];
}
if(document.all)
{
//为IE添加遮罩iframe，用于遮盖页面上的select
if(document.getElementsByTagName("select").length>0)
{
//寻找遮罩
var masks=document.getElementsByTagName("iframe");
for(var i=0;i<masks.length;i++)
{
if(masks[i].getAttribute("move_mask")=="move_mask")
{
this.menuMask=masks[i];
break;
}
}
if(this.menuMask==null)
{
with(this.menuObj)
{
style.zIndex=(style.zIndex||0)<2?2:style.zIndex;
}
this.menuMask=document.createElement("iframe");
with(this.menuMask)
{
setAttribute("move_mask","move_mask");
src="javascript:''";
scrolling="no";
frameBorder="0";
style.position="absolute";
style.zIndex=this.menuObj.style.zIndex-1;
var curBorder=this.menuObj.currentStyle["borderWidth"];
style.top=parseInt(this.menuObj.currentStyle["top"])+parseInt(curBorder)+"px";
style.left=parseInt(this.menuObj.currentStyle["left"])+parseInt(curBorder)+"px";
style.width=parseInt(this.menuObj.currentStyle["width"])+2*parseInt(curBorder)+"px";
style.height=parseInt(this.menuObj.currentStyle["height"])+2*parseInt(curBorder)+"px";
}
this.menuObj.parentNode.appendChild(this.menuMask);
}
}
}
};
menuOC.prototype={
getStyle:function(obj,stylename)//获取控件实际样式
{
var curVal="";
if (obj.currentStyle)
{
curVal=obj.currentStyle[stylename]
}
else
{
curVal=document.defaultView.getComputedStyle(obj, null)[stylename];
}
return curVal;
},
getMaxWH:function()//获取初始宽度高度
{
with(this.menuObj)
{
var width=getAttribute("maxwidth");
if(width==null || width=="")
{
width=parseInt(this.getStyle(this.menuObj,"width"));
setAttribute("maxwidth",width);
}
var height=getAttribute("maxheight");
if(height==null || height=="")
{
height=parseInt(this.getStyle(this.menuObj,"height"));
setAttribute("maxheight",height);
}
this.menuPoint.width=width;
this.menuPoint.height=height;
}
},
show:function()//显示
{
this.clearInterval();
this.moveInit();
with(this.menuObj.style)
{
display = "block";
width = "1px";
height = "1px";
}
if(this.menuMask!=null)
{
with(this.menuMask.style)
{
display = "block";
width = "1px";
height = "1px";
}
}
var self=this;
this.menuPoint.prox=setInterval(function(){self.openx(self.menuPoint.width,self.menuObj,self.menuMask);},10);
},
hidden:function()//关闭
{
this.clearInterval();
if(this.menuObj.style.display == "block")
{
var self=this;
this.menuPoint.proyc=setInterval(function(){self.closey(self.menuObj,self.menuMask);},10);
}
},
openx:function(x,obj,mask)//横向打开
{
var cx = parseInt(obj.style.width);
if(cx < x)
{
obj.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
if(mask!=null)
{
mask.style.width=parseInt(obj.style.width)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
}
}
else
{
clearInterval(this.menuPoint.prox);
var self=this;
this.menuPoint.proy=setInterval(function(){self.openy(self.menuPoint.height,self.menuObj,self.menuMask);},10);
}
},
openy:function(y,obj,mask)//纵向打开
{
var cy = parseInt(obj.style.height);
if(cy < y)
{
obj.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
if(mask!=null)
{
mask.style.height=parseInt(obj.style.height)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
}
}
else
{
clearInterval(this.menuPoint.proy);
}
},
closey:function(obj,mask)//纵向关闭
{
var cy = parseInt(obj.style.height);
if(cy > 0)
{
obj.style.height = (cy - Math.ceil(cy/5)) +"px";
if(mask!=null)
{
mask.style.height=parseInt(obj.style.height)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
}
}
else
{
clearInterval(this.menuPoint.proyc);
var self=this;
this.menuPoint.proxc=setInterval(function(){self.closex(self.menuObj,self.menuMask);},10);
}
},
closex:function(obj,mask)//横向关闭
{
var cx = parseInt(obj.style.width);
if(cx > 0)
{
obj.style.width = (cx - Math.ceil(cx/5)) +"px";
if(mask!=null)
{
mask.style.width=parseInt(obj.style.width)+2*parseInt(parseInt(this.getStyle(obj,"borderWidth")))+"px";
}
}
else
{
clearInterval(this.menuPoint.proxc);
obj.style.display = "none";
if(mask!=null)
{
mask.style.display=obj.style.display;
}
}
},
clearInterval:function()//取消循环
{
clearInterval(this.menuPoint.prox);
clearInterval(this.menuPoint.proy);
clearInterval(this.menuPoint.proxc);
clearInterval(this.menuPoint.proyc);
},
/*-------------------------鼠标拖动---------------------*/
moveInit:function()//初始化拖动
{
if(this.canMove)
{
//允许拖动
this.startParam={x0:0,y0:0,x1:0,y1:0};
this.moveable=false;
var self=this;
with(this.menuObj)
{
style.zIndex=(style.zIndex||0)<2?2:style.zIndex;
onmousedown=function(){self.startMove();};
}
this.cancelBubble();
}
},
cancelBubble:function()//为图层内部控件取消事件冒泡
{
var objTagName=["input","select","textarea","a","button"];
var self=this;
for(var i=0;i<objTagName.length;i++)
{
with(this.menuObj)
{
var objs=getElementsByTagName(objTagName[i]);
for(var j=0;j<objs.length;j++)
{
objs[j].onmousedown=function()
{
var evt=window.event || arguments[0];
if (evt.preventDefault)
{
evt.stopPropagation();
}
else
{
evt.cancelBubble = true;
evt.returnValue = false;
}
};
}
}
}
},
movePoint:function(px,py)//坐标点
{
this.x=px;
this.y=py;
},
getEvent:function()//获取事件对象
{
return window.event || arguments.callee.caller.caller.arguments[0];
},
getMousePoint:function(evt)//获取鼠标坐标
{
var pt=new this.movePoint(0,0);
if(document.all)
{
pt.x=evt.clientX;
pt.y=evt.clientY;
}
else
{
pt.x=evt.pageX;
pt.y=evt.pageY;
}
return pt;
},
startMove:function()//开始移动
{
if(document.all)
{
this.menuObj.setCapture();
this.menuObj.filters.alpha.opacity=50;
}
else
{
if(window.captureEvents)
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
this.menuObj.style.opacity=0.5;
}
}
var evt=this.getEvent();
with(this.getMousePoint(evt))
{
this.startParam.x0=x;
this.startParam.y0=y;
}
with(this.menuObj)
{
this.startParam.x1=offsetLeft;
this.startParam.y1=offsetTop;
}
this.moveable=true;
var self=this;
if(document.all)
{
this.menuObj.onmousemove=function(){self.Moveing(self.menuMask);};
this.menuObj.onmouseup=function(){self.endMove();};
}
else
{
document.onmousemove=function(){self.Moveing();};
document.onmouseup=function(){self.endMove();};
}
},
Moveing:function()//移动中
{
if(this.moveable)
{
var tmp_left,tmp_top,evt=this.getEvent();
with(this.getMousePoint(evt))
{
tmp_left=(x+this.startParam.x1-this.startParam.x0);
tmp_top=(y+this.startParam.y1-this.startParam.y0);
}
with(this.menuObj)
{
style.left=tmp_left+"px";
style.top=tmp_top+"px";
if(arguments[0])
{
var curBorder=currentStyle["borderWidth"];
arguments[0].style.left=parseInt(style.left)+2*parseInt(curBorder)+"px";
arguments[0].style.top=parseInt(style.top)+2*parseInt(curBorder)+"px";
}
}
}
},
endMove:function()//结束移动
{
if(document.all)
{
this.menuObj.releaseCapture();
this.menuObj.filters.alpha.opacity=100;
}
else
{
if(window.releaseEvents)
{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
this.menuObj.style.opacity=1;
}
document.onmousemove=null;
document.onmouseup=null;
}
this.moveable=false;
}
};
var menuOC_obj=null;
function openBox()
{
if(menuOC_obj==null)
{
menuOC_obj=new menuOC("activeBox",true);
}
menuOC_obj.show();
}
function closeBox()
{
menuOC_obj.hidden();
}
调用代码
<!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>JS打开关闭移动层动画实例 - 星辰创想</title>
<script type="text/javascript" src="http://www.my400800.cn/js/www.my400800.cn.js"></script>
<style type="text/css">
a.title_close{position:absolute; right:3px; top:3px;display:block; width:32px; height:18px; overflow:hidden; background-position:0px 0px;}
.scrollBox{
width:500px;
height:200px;
background:#EDF1F8;
border: 1px solid #849BCA;
overflow:hidden;
position:absolute;
left:200px;
top:100px;
cursor:move;
filter:alpha(opacity=100);
opacity:1;
display:none;
}
.content{
padding:10px;
}
</style>
</head>
<body>
<a href="#" onclick = "openBox();return false;">[打开层]</a>
<div id="activeBox" class="scrollBox">
<a href="#" class="title_close" onclick="closeBox();return false;" title="关闭">关闭</a>
<div class="content">移动层<form action="javascript:void(0);"><input type="text" value="aa" /><select><option>1111</option><option>2222</option><option>3333</option></select><input type="submit" name="submitBotton" value="提交" /></form>11111111111</div>
</div>
<iframe width="0px" height="0px" scrolling="no" frameborder="0" src="about:blank" />
</body>
</html>
