js动画效果打开层 关闭层

http://www.jb51.net/article/14284.htm

by Lien Z

HTML

<div id="bodyL"> 
    <a href="#" class="od" onclick = "show('fd');return false;"> [打开层] </a> 
    <a href="#" class="od" onclick = "closeed('fd');return false;"> [关闭层] </a> 
</div>     
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> 
    <div class="content">移动层</div>     
</div>

CSS

body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} 
#bodyL{ 
    float:left; 
    width:84px; 
    margin-right:2px; 
} 
a.od{ 
    width:80px; 
    height:25px; 
    line-height:25px; 
    text-align:center; 
    font-weight:bold; 
    border: 2px solid #849BCA;     
    display:block; 
    color:#547BC9; 
    float:left; 
    text-decoration:none; 
    margin-top:2px; 
} 
a.od:link{ 
    background:#EEF1F8; 
} 
a.od:visited{ 
    background:#EEF1F8; 
} 
a.od:hover{ 
    background:#EEE; 
} 
a.od:active{ 
    background:#EEE; 
} 
#fd{     
    width:500px; 
    height:200px; 
    background:#EDF1F8;     
    border: 2px solid #849BCA; 
    margin-top:2px; 
    margin-left:2px; 
    float:left; 
    overflow:hidden; 
    position:absolute; 
    left:0px; 
    top:0px; 
    cursor:move; 
    float:left; 
    /*filter:alpha(opacity=50);*/ 
     
} 
.content{ 
    padding:10px; 
}

JavaScript

var prox;
var proy;
var proxc;
var proyc;

function show(id) { /*--打开--*/
    clearInterval(prox);
    clearInterval(proy);
    clearInterval(proxc);
    clearInterval(proyc);
    var o = document.getElementById(id);
    o.style.display = "block";
    o.style.width = "1px";
    o.style.height = "1px";
    prox = setInterval(function() {
        openx(o, 500)
    }, 10);
}

function openx(o, x) { /*--打开x--*/
    var cx = parseInt(o.style.width);
    if (cx < x) {
        o.style.width = (cx + Math.ceil((x - cx) / 5)) + "px";
    }
    else {
        clearInterval(prox);
        proy = setInterval(function() {
            openy(o, 200)
        }, 10);
    }
}

function openy(o, y) { /*--打开y--*/
    var cy = parseInt(o.style.height);
    if (cy < y) {
        o.style.height = (cy + Math.ceil((y - cy) / 5)) + "px";
    }
    else {
        clearInterval(proy);
    }
}

function closeed(id) { /*--关闭--*/
    clearInterval(prox);
    clearInterval(proy);
    clearInterval(proxc);
    clearInterval(proyc);
    var o = document.getElementById(id);
    if (o.style.display == "block") {
        proyc = setInterval(function() {
            closey(o)
        }, 10);
    }
}

function closey(o) { /*--打开y--*/
    var cy = parseInt(o.style.height);
    if (cy > 0) {
        o.style.height = (cy - Math.ceil(cy / 5)) + "px";
    }
    else {
        clearInterval(proyc);
        proxc = setInterval(function() {
            closex(o)
        }, 10);
    }
}

function closex(o) { /*--打开x--*/
    var cx = parseInt(o.style.width);
    if (cx > 0) {
        o.style.width = (cx - Math.ceil(cx / 5)) + "px";
    }
    else {
        clearInterval(proxc);
        o.style.display = "none";
    }
}


/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("fd");
var dx, dy, mx, my, mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e) {
    var e = e ? e : event;
    if (e.button == (document.all ? 1 : 0)) {
       ...