DOM案例—經典的仿163首頁伸縮廣告 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!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>

摘自 劉海闖的專欄

發佈留言