卷帘效果
<head>
<title>卷帘效果</title>
</head>
<body>
<input id="shen" type="button" value="展开">
<input id="shou" type="button" value="收起">
<div id="wind" style="background-color:#bbbbbb;width:200px;height:1px;">
</div>
<script type="text/javascript">
//控制展开的旗标
var shenflag=true;
var shouflag = false;
function shen(){
if(shenflag){
shouflag=false;
var tm;
var windHeight=document.getElementById("wind").style.height;
if(parseInt(windHeight.substring(0,windHeight.indexOf("px")))<100){
document.getElementById("wind").style.height=
parseInt(windHeight.substring(0,windHeight.indexOf("px")))+2+"px";
tm = setTimeout("shen()",50);
}else{
clearTimeout(tm);
shouflag = true;
}
}
}
function shou(){
if(shouflag){
shenflag=false;
var tm;
var windHeight=document.getElementById("wind").style.height;
if(parseInt(windHeight.substring(0,windHeight.indexOf("px")))>3){
document.getElementById("wind").style.height=
parseInt(windHeight.substring(0,windHeight.indexOf("px")))-2+"px";
tm = setTimeout("shou()",50);
}else{
clearTimeout(tm);
shouflag = true;
}
}
}
document.getElementById("shen").onclick=shen;
document.getElementById("shou").onclick=shou;
</script>
</body>
