实现广告收缩的代码

来源：互联网发布：ubuntu squid 透明代理编辑：程序博客网时间：2024/04/28 02:14

<!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 onload="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>