仿163首页的广告收缩效果

本文链接：https://blog.csdn.net/zwt90/article/details/7299641

今天实现了仿163首页的广告收缩效果，代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿163首页的广告收缩效果</title>
<style type="text/css">
#top{
  position:relative;
  }
#content{
  position:absolute;
  }
</style>
</head>

<body style="margin:0px 0px;" Xοnlοad="moveDown()">
<div id="top" style="width:100%; height:300px; background-color:#FF0000;">
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
</div>

<div id="content" style="width:100%; height:500px; background-color:#33FF33;">
网页的正文部分
</div>

</body>
</html>
<script Xlanguage="javascript" type="text/javascript">
//定义一个步长
var s1=0;
var maxheight=300;
var st;
var top=document.getElementById("top");
//初始时设置广告div为隐藏状态
top.style.display="none";
//定义广告div展开
function moveDown(){
  //累加变量
  s1+=2;
  //设置层的高度等于累加的值
  top.style.height=s1;
  //设置层显示
  top.style.display="block";
  //判断是否展开到最大，若没有则继续向下展开，否则开始收缩
  if(s1<=maxheight){
   st=setTimeout("moveDown()",10);
  }else{
   clearTimeout(st);
   st=setTimeout("moveUp()",10);
  }
}
//定义广告div收缩
function moveUp(){
//累加变量
  s1-=2;
  //设置层的高度等于累加的值
  top.style.height=s1;
  //设置层显示
  top.style.display="block";
  //判断是否收缩完毕，若是则隐藏广告div，否则继续
  if(s1<=0){
   top.style.display="none";
   //clearTimeout(st);
   //st=setTimeout("moveDown()",10);
  }else{
   st=setTimeout("moveUp()",10);
  }
}
</script>