javascript顶部下拉收缩广告效果
分享一段代码实例，它实现了顶部下拉广告。
并且广告下拉指定时间以后，广告会自动收缩。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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一章节。
javascript顶部下拉收缩广告效果，这样的场景在实际项目中还是用的比较多的，关于javascript顶部下拉收缩广告效果就介绍到这了。
javascript顶部下拉收缩广告效果属于前端实例代码，有关更多实例代码大家可以查看。