網頁頂部廣告展開與收起

在很多網站中，為了廣告推送效果，往往會在進入網站的時候，出現彈窗；一定時間後，再次收起，不影響使用者的體驗。

程式碼思路分析

進入頁面，廣告頁面 自動 展開收起，說明我們可以使用 計時器 完成。我們可以實時改變廣告頁面的 高度 ，以達到相應的動畫效果。

程式碼結構

HTML檔案

<div id="advertising">
	<img id="advertising-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541524709217&di=92387f0949e14c6bba4428b280ea41c9&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201705%2F23%2F171626c8zga7nho3eblgzv.jpg"
 
 width="960" height="385" />
</div>
<div id="content">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541526060871&di=19f3e9140684810921272f8eafe05179&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201310%2F28%2F20131028142745_a4HJy.jpeg"
 
 alt="圖片載入失敗" />
</div>

CSS檔案

* {
	margin: 0;
	padding: 0;
}

#content {
	width: 960px;
	height: 1000px;
	background: #ccc;
	margin: 0 auto;
	overflow: hidden;
}

#advertising {
	width: 960px;
	margin: 0 auto;
	display: none;
	position: relative;
	overflow: hidden;
}

JS檔案（關鍵）

<script>
 

	var oAdvertising = document.getElementById('advertising');
	var oAdvertisingImg = document.getElementById('advertising-img');
	var h = 0;
	var step = 5;
	var maxHeight = oAdvertisingImg.height;
	function advertisingDown() {
			oAdvertising.style.height = h + 'px';
			oAdvertising.style.display = 'block';
			if (h < maxHeight) {
				h += step;
				setTimeout(advertisingDown, 1);
			} else {
				setTimeout(advertisingUp, 3000);
			}
	}

	function advertisingUp() {
		if (h > 0) {
			h -= step;
			oAdvertising.style.height = h + 'px';
			setTimeout(advertisingUp, 1);
			}
	}
	setTimeout(advertisingDown, 3000);
</script>

溫馨提示

在製作該動畫效果時，我們對於宣告的 函式 ，必須清楚執行的 時機 。這個時機的 分界點 就是廣告頁面的高度 h ；當頁面的高度 h 小於最大高度 maxHeight 時 展開 ，當達到最大高度 maxHeight 後，向上 收起 。