div弹出对话框（动画效果）

JS代码

文件名称:my400800.cn.js

 var menuOC=function()
{
    this.menuPoint={prox:null,proy:null,proxc:null,proyc:null,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; 32px; height:18px; overflow:hidden; background-position:0px 0px;}
.scrollBox{
    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>