<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿163首頁的廣告收縮效果</title>
<style>
#top{
position:relative;
}
#content{
position:absolute;
}
</style>
</head>
<body onload="moveDown()" style="margin:0px; 0px;">
<p 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>
</p>
<p id="content" style="width:100%; height:500px; background-color:#FF9">這是網頁的正文部分</p>
</body>
</html>
<script language="javascript" type="text/javascript">
//定義要移動的距離
var h=0;
var maxheight=300;
var st;
var top=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);
}
}
</script>
摘自 劉海闖的專欄