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>