层的卷帘效果

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input id="shen" type="button" value="展开帮助" οnclick="shen();"/>

<div id="wind" style="background-color:#B0D8FF; overflow:hidden; float:inherit width:100px;height:0px; border:0px;">
你好!<br>
Hello!<br>
-.-<br>
猪!!!<br>


</div>
<script type="text/javascript">

//控制卷帘伸开的函数
function shen()
{
 var qq = document.getElementById("shen");
 if (qq.value == "展开帮助")
 {
  
  
  
  
  var tm;
  var windHeight = document.getElementById("wind").style.height;
  
  //如果目标对象的高度小于100px,则让其高度继续增大
  if (parseInt(windHeight.substring( 0, windHeight.indexOf("px"))) < 200)
  {
   //修改目标对象的高度为原有高度 + 2。
   document.getElementById("wind").style.height =
    parseInt(windHeight.substring( 0,
    windHeight.indexOf("px"))) + 10 + "px";
   //每50ms将为目标对象的告诉增加2
   tm = setTimeout("shen()" , 0.5);
  }
  else
  {qq.value="关闭帮助";
   clearTimeout(tm);
return;
  }
 }else if(qq.value == "关闭帮助"){
  
  var tm;
  var windHeight = document.getElementById("wind").style.height;
  //如果目标对象的高度大于3px,则让其高度继续增大
  if (parseInt(windHeight.substring( 0, windHeight.
   indexOf("px"))) > 1)
  {
   //修改目标对象的高度为原有高度 - 2。
   document.getElementById("wind").style.height =
    parseInt(windHeight.substring( 0,
    windHeight.indexOf("px"))) - 10 + "px";
   //每隔50ms将目标对象的高度减2
   tm = setTimeout("shen()" , 50);
  }
  else
  {qq.value="展开帮助";
   clearTimeout(tm);
return;
   
  }
 }
}
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值