卷帘效果

【Javascript】

下载

新闻

文章

js卷帘效果

注意不能设置div的高为0，在ie下显示全部内容
<div><input type="button" onclick="Start(1)" value="展开"/><input type="button" onclick="Start(-1)" value="收缩"/></div>
<div id="divInfo" style="position:absolute; left:68px; top:127px; width:312px; height:1px; z-index:1; border:solid 1px black; overflow:hidden;">
   <div id="inof">我要是显示信息1 </div>
   <div id="Div1">我要是显示信息2 </div>
   <div id="Div2">我要是显示信息3 </div>
   <div id="Div3">我要是显示信息4 </div>
   <div id="Div4">我要是显示信息5 </div>
   <div id="Div5">我要是显示信息6 </div>
   <div id="Div6">我要是显示信息7 </div>
   <div id="Div7">我要是显示信息8 </div>
   <div id="Div8">我要是显示信息9 </div>
</div>

<script>
var timer=null;
function Start(Step)
{
  var divInfo=document.getElementById("divInfo");
  var Height=parseInt(divInfo.style.height)+Step;Height=Height==0?1:Height;
  divInfo.style.height=Height+"px";
  if(!timer)
  {
    timer=setInterval(function(){Start(Step)},10);    
    }
  if(((Step==-1&&parseInt(divInfo.style.height)<=1)
    ||(Step==1&&divInfo.scrollHeight<=parseInt(divInfo.style.height)))&&timer)
    {
    clearInterval(timer);    timer=null;}
}
</script>