固定於頂部緩慢下拉且可以定時消失的廣告效果

螞蟻小編發表於2017-03-25

本章節介紹一下如何實現固定於網頁頂部，當網頁載入完畢，能夠緩慢下拉，當廣告展現完畢以後，能夠在指定的時間後自動收起的廣告效果，此種效果如果使用jquery將會很輕鬆實現，下面介紹一下如何使用原生javascript實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  margin:0px auto; 
  width:900px; 
  background:#369; 
  height:300px; 
  color:#fff;
  text-align:center;
}
</style>
<script type="text/javascript"> 
var h=0;
function addCount(){ 
  h=h+5; 
  if(h>300){ 
    return; 
  } 
  document.getElementById("thediv").style.display=""; 
  document.getElementById("thediv").style.height=h+"px"; 
  setTimeout("addCount()",30); 
} 
 
function noneAds(){ 
  h = h-5; 
  if(h<0){ 
    document.getElementById("thediv").style.display = "none"; 
    return; 
  } 
  document.getElementById("thediv").style.height = h+"px"; 
  setTimeout("noneAds()",30); 
} 
 
window.onload = function showAds(){ 
  addCount(); 
  setTimeout("noneAds()",7000); 
} 
</script> 
</head> 
 
<body> 
<div id="thediv">螞蟻部落</div> 
</body> 
</html>

上面的程式碼實現了我們的要求，下面簡單介紹一下它的實現過程。

一.程式碼註釋:

1.var h=0，宣告一個變數並賦初值為0，用來存放廣告的高度。

2.function addCount(){}，此函式實現了廣告高度的漸增效果。

3.h=h+5，每執行一次函式，高度加5。

4.if(h>300){return;}，如果高度大於300，那麼跳出函式的執行。

5.document.getElementById("thediv").style.display=""，清除元素的display屬性，這種情況下元素是顯示的。

6.document.getElementById("thediv").style.height=h+"px"，設定元素的高度。

7.setTimeout("addCount()",30)，遞迴呼叫函式addCount()。

8.function noneAds(){}，此函式可以實現廣告的隱藏。

9.h = h-5，每執行一次函式高度減5。

10.if(h<0){ 

    document.getElementById("thediv").style.display = "none"; 

    return; 

} 

如果高度小於零，那麼就將此div隱藏，並且跳出函式的執行。

11.document.getElementById("thediv").style.height = h+"px"，設定div的高度。

12.setTimeout("noneAds()",30)，遞迴呼叫函式noneAds()。

二.相關閱讀:

1.setTimeout()函式可以參閱setTimeout()一章節。 

相關文章