网页顶部广告展开与收起
在很多网站中,为了广告推送效果,往往会在进入网站的时候,出现弹窗;一定时间后,再次收起,不影响用户的体验。
代码思路分析
进入页面,广告页面 自动 展开收起,说明我们可以使用 计时器 完成。我们可以实时改变广告页面的 高度 ,以达到相应的动画效果。
代码结构
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 后,向上 收起 。