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顶部下拉收缩广告效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容