使用js打开关闭div

<!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>
    
<title></title>
    
<style>
    #myDiv
{ border:5px; solid #C4E3FD;filter: Alpha(Opacity=80); background:#C4E3FD; width:300px; height:400px; margin:0 0 0 0; float:right; display:block }

    
</style>
    
<script type="text/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, 300) }, 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, 400) }, 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);
            o.style.display 
= "block";
            o.style.height 
= "400px";
            
if (o.style.display == "block") {
                proyc 
= setInterval(function () { closey(o) }, 10);
            }
        }
        
function closey(o) {/*--打开y--*/
            
var cy = parseInt(o.style.height);
            
//    if (cy > 0) {
            if (cy > 0) {
                
//如果没有((cy - Math.ceil(cy / 5)) < 30) 则全部关闭该div div在界面上看不见了
                if ((cy - Math.ceil(cy / 5)) < 30) {
                    o.style.height 
= "30px";
                }
                
else {
                    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";
            }
        }
    
</script>
</head>
<body>
<div id="myDiv" style=" float:right; z-index:2; 300; height:400"  >
 
<div id="myhandle">
 
<div><href="#" onclick = "show('myDiv');return false;">打开div</a></div>
 
<div><href="#" onclick = "closeed('myDiv');return false;">关闭div</a></div>
 
</div>
 
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/z_lb/p/1757761.html