使用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; width:300; height:400" >
<div id="myhandle">
<div><a href="#" onclick = "show('myDiv');return false;">打开div</a></div>
<div><a href="#" onclick = "closeed('myDiv');return false;">关闭div</a></div>
</div>
</div>
</body>
</html>
<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; width:300; height:400" >
<div id="myhandle">
<div><a href="#" onclick = "show('myDiv');return false;">打开div</a></div>
<div><a href="#" onclick = "closeed('myDiv');return false;">关闭div</a></div>
</div>
</div>
</body>
</html>