<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>仿163首页的广告收缩效果</title>
<style>
#top{
position:relative;
}
#content{
position:absolute;
}
</style>
</head>
<body οnlοad="moveDown()"style="margin:0px; 0px;">
<div id="top"style="width:100%; height:100px; background-color:#F96">网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
</div>
<div id="content"style="width:100%; height:500px; background-color:#FF9">这是网页的正文部分</div>
</body>
</html>
<script language="javascript"type="text/javascript">
//定义要移动的距离
varh=0;
varmaxheight=300;
varst;
vartop=document.getElementById("top");
//初始时，设置top为隐藏状态
top.style.display="none";
//定义让广告部分展开
function moveDown(){
//累加
h+=2;
//设置高度等于我们累加的值
top.style.height=h;
//设置层显示
top.style.display="block";
//判断是否到最大
if(h<=maxheight){
st=setTimeout("moveDown()",50);
}else{
clearTimeout(st);
//延迟3秒，开始收缩
setTimeout("moveUp()",3000);
}
}
//定义让广告部分收缩
function moveUp(){
//设置
h-=2;
//设置高度等于我们累加的值
top.style.height=h;
//设置层显示
top.style.display="block";
if(h<=0){
top.style.display="none";
//清空定时器
clearTimeout(st);
}else{
//如果h>0,则继续收缩
st= setTimeout("moveUp()",50);
}s
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
