<!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"s>
<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 οnlοad="moveDown()">
<div id="top" style="width:80%;heigth:500px;background-color:#F96">
这是网页的广告部分
</div>
<div id="content" style="width:80%;height:300px;background-color:#CC0">这是网页的正文部分</div>
</body>
</html>
<script language="javascript" type="text/javascript">
//定义一个步长
var h=0;
var maxheight=400;
var st;
var top=document.getElementById("top");
//初始时设置top为隐藏状态
top.style.display="none";
//定义广告部分
function moveDown(){
h+=2;
//设置显示
top.style.height=h+"px";
top.style.display="block";
if(h<maxheight){
st=setTimeout("moveDown()",40);
}else{
setTimeout("moveUp()",50);
}
}
//定义正文部分
function moveUp(){
h-=2;
top.style.height=h+"px";
top.style.display="block";
if(h<=0){
top.style.display="none";
clearTimeout(st);
}else{
//如果h大于0则继续收缩
setTimeout("moveUp()",50);
}
}
</script>