javascript頂部下拉收縮廣告效果

螞蟻小編發表於2017-04-14
JavaScript

分享一段程式碼例項，它實現了頂部下拉廣告。

並且廣告下拉指定時間以後，廣告會自動收縮。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  margin: 0 auto;
  padding: 0;
}
a:focus {
  outline: none;
}
#pn {
  background: #e8e8e8;
  height: 60px;
  width: 600px;
  display: block;
  margin: 0 auto;
  padding: 5px;
  font-size: 9pt;
  height: auto;
  text-align: center;
}
.slide {
  margin: 0;
  padding: 0;
  width: 600px;
  border-top: solid 4px gray;
  margin: 0 auto;
}
.btn-slide {
  background: gray;
  text-align: center;
  width: 590px;
  height: 30px;
  padding: 10px 10px 0 0;
  margin: 0 auto;
  display: block;
  color: #fff;
  text-decoration: none;
}
</style>
<script type="text/javascript">
var h = 0;
function addCount() {
  if (h >= 300){
    return;
  } else {
    h = h + 5;
    document.getElementById("pn").style.height = h + "px";
  }
  setTimeout(addCount, 30);
}
function noneAds() {
  if (h > 8) {
    h = h - 5;
    document.getElementById("pn").style.height = h + "px";
  } else {
    return;
  }
  setTimeout("noneAds()", 30);
}
window.onload = function() {
  addCount();
  setTimeout(noneAds, 5000);
}
</script>
</head>
<body>
  <div>
    <div id="pn">
      <h1>螞蟻部落歡迎您</h1>
    </div>
    <p class="slide">
      <a href="#" id="strHref" class="btn-slide"></a>
    </p>
  </div>
</body>
</html>

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

一.程式碼註釋:

（1）.var h = 0，宣告一個變數並賦初值為0，用來儲存id屬性值為pn元素的高度。

（2）.function addCount() {}，此方法能夠控制pn元素高度增長。

（3）.if (h >= 300){

  return;

} else {

  h = h + 5;

  document.getElementById("pn").style.height = h + "px";

}，如果h值大於等於300，那麼就直接跳出函式，否則的話元素的高度就會增加5px。

（4）.setTimeout(addCount, 30)，使用定時器函式遞迴呼叫addcount函式。

（5）.noneAds() {}，此函式實現了頂部廣告收縮效果。

（6）.if (h > =8) {

  h = h - 5;

  document.getElementById("pn").style.height = h + "px";

} else {

  return;

}，如果h大於等於8，那麼元素的高度繼續遞減。

否則直接跳出函式。

（7）.setTimeout(noneAds, 30),使用定時器函式遞迴呼叫noneAds函式。

二.相關閱讀:

（1）.setTimeout可以參閱setTimeout()一章節。

（2）.style方式設定元素樣式可以參閱js style一章節。

相關文章