日期:2014-05-16  浏览次数:20268 次

js实现层的收缩01
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*
{
margin:0;
padding:0;
}
.M_d
{
position:relative;
border:1px solid #eeaaee;
width:200px;
height:25px;
}
.M_M_d
{
width:200px;
background-color:#CCFFFF;
height:1px;
overflow:hidden;
}
.M_F_d
{
display:none;
}
</style>
<script type="text/javascript">
var act;
function  showMM()  {
var MM_height=document.getElementById("M_M_menu");
var MT_S=document.getElementById("M_T_menu");
var MF_S=document.getElementById("M_F_menu");
var Mclose=document.getElementById("Mclose");
if (MM_height.style.pixelHeight<150)  {
    MM_height.style.pixelHeight +=10;
clearTimeout(act);
    act=setTimeout("showMM()",30);   }
else {
MT_S.style.display="none";
    MF_S.style.display="block"; }
}  


function hiddenMM()  {
var MM_height=document.getElementById("M_M_menu");
var MT_S=document.getElementById("M_T_menu");
var MF_S=document.getElementById("M_F_menu");
var Mclose=document.getElementById("Mclose");
if (MM_height.style.pixelHeight>1) {
  MM_height.style.pixelHeight -=10;
  clearTimeout(act);
  act=setTimeout("hiddenMM()",30);   }
else { 
  MF_S.style.display="none";
  MT_S.style.display="block";
  Mclose.style.display="block";
  MM_height.style.pixelHeight=1;
    }
}  
function closeMM()  {
document.getElementById("M_menu").style.display="none";
}
</script>
</head>
<body >
<div id="M_menu" class="M_d">
   <div id="M_T_menu" class="M_T_d" ><span onclick="showMM()" style="background-color:#003399; float:left;">箭头(开)</span><span id="Mclose" onClick="closeMM()" style="float:left;background-color:#CC0000;display:none;">关闭</span></div>
   <div id="M_M_menu" class="M_M_d">
      fffffff<br>
  fffffff<br>
  fffffff<br>
  fffffff<br>
  fffffff<br>
  fffffff<br>
   </div>
   <div id="M_F_menu" class="M_F_d" ><span onclick="hiddenMM()" style="background-color:#003399">箭头(关)</span></div>
</div>
</body>
</html>