网页顶部广告展开与收起

版权声明： https://blog.csdn.net/qq_41115965/article/details/83833346

网页顶部广告展开与收起

在很多网站中，为了广告推送效果，往往会在进入网站的时候，出现弹窗；一定时间后，再次收起，不影响用户的体验。

---

代码思路分析

进入页面，广告页面 自动 展开收起，说明我们可以使用 计时器 完成。我们可以实时改变广告页面的 高度 ，以达到相应的动画效果。

---

代码结构

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 后，向上 收起 。