卡卡网

很多网站在打开时，顶部首先展开一条大横幅，几秒后自动收起，但并非消失，这种广告效果比较好，因为它让人一定注意到它的存在，并看到它的广告内容。本文就介绍一下这个广告的实现方法，使用的是css+jQuery技术，代码很少，并且很简单。

网页顶部大横幅#可展开收起#

demo

CSS代码

body {
margin: 0px; padding: 0px;
}
.topBanner .main {
position: relative;
}
.topBanner .bannerMax {
background: url("images/banner_max.jpg") no-repeat top; height: 392px; overflow: hidden; display: none;
}
.topBanner .bannerMax .Btn {
background: url("images/arrow.png") no-repeat; top: 35px; right: 10px; width: 23px; height: 23px; overflow: hidden; position: absolute; cursor: pointer;
}
.topBanner .bannerMin {
background: url("images/banner_min.jpg") no-repeat top; height: 100px; overflow: hidden; display: block;
}
.topBanner .bannerMin .Btn {
background: url("images/arrow.png") no-repeat left -23px; top: 35px; right: 10px; width: 23px; height: 23px; overflow: hidden; position: absolute; cursor: pointer;
}
.topBanner .bannerMax a {
height: 392px; display: block;
}
.topBanner .bannerMin a {
height: 100px; display: block;
}

代码解释

.bannerMax 是展开后的横幅，这里设置高度属性是height: 392px;

.bannerMin 是收起后的横幅，这里设置高度属性是height: 100px;

.Btn 是可点击的“展开/收起”箭头按钮，这里设置它的位置属性是top: 35px; right: 10px;。

HTML代码

<DIV class="topBanner">
  <DIV class="bannerMax">
    <DIV class="main">
      <DIV class="Btn"></DIV>
      <A href="http://www.webkaka.com/" target="_blank"></A>
    </DIV>
  </DIV>
  <DIV class="bannerMin">
    <DIV class="main">
      <DIV class="Btn"></DIV>
      <A href="http://www.webkaka.com/" target="_blank"></A>
    </DIV>
  </DIV>
</DIV>

execcodegetcode

代码解释

class="topBanner"的div定义横幅的位置，class="bannerMax"是展开后横幅的div，class="bannerMin"是收起后横幅的div，class="Btn"是“展开/收起”的箭头按钮图标。

jQuery代码

<SCRIPT type="text/javascript" src="js/jquery-1.9.0.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function(){
 jQuery(function(){
  jQuery(".bannerMax .Btn").click(function(){
    jQuery('.bannerMax').slideUp(500);
    jQuery('.bannerMin').slideDown(500);
  });
  jQuery(".bannerMin .Btn").click(function(){
    jQuery('.bannerMin').slideUp(500);
    jQuery('.bannerMax').slideDown(500);
  });
 });
 setTimeout(function(){
  jQuery('.bannerMin').slideUp(500);
  jQuery('.bannerMax').slideDown(500);
 },500);
 setTimeout(function(){
  jQuery('.bannerMax').slideUp(500);
  jQuery('.bannerMin').slideDown(500);
 },3500);
});
</script>

代码解释

首先要引用jQuery库文件。

jQuery(".bannerMax .Btn").click()是点击“收起”箭头图标时的动画：大横幅向上滑动（slideUp），小横幅向下滑动（slideDown）。

jQuery(".bannerMin .Btn").click()是点击“展开”箭头图标时的动画：小横幅向上滑动（slideUp），大横幅向下滑动（slideDown）。

setTimeout()是打开页面时先“展开”，3.5秒后“收起”的效果。

标签: css  横幅  banner