卡卡網(wǎng)

很多網(wǎng)站在打開時(shí)，頂部首先展開一條大橫幅，幾秒后自動(dòng)收起，但并非消失，這種廣告效果比較好，因?yàn)樗屓艘欢ㄗ⒁獾剿拇嬖?，并看到它的廣告內(nèi)容。本文就介紹一下這個(gè)廣告的實(shí)現(xiàn)方法，使用的是css+jQuery技術(shù)，代碼很少，并且很簡單。

網(wǎng)頁頂部大橫幅#可展開收起#

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 是展開后的橫幅，這里設(shè)置高度屬性是height: 392px;

.bannerMin 是收起后的橫幅，這里設(shè)置高度屬性是height: 100px;

.Btn 是可點(diǎn)擊的“展開/收起”箭頭按鈕，這里設(shè)置它的位置屬性是top: 35px; right: 10px;。

HTML代碼

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

execcodegetcode

代碼解釋

class="topBanner"的div定義橫幅的位置，class="bannerMax"是展開后橫幅的div，class="bannerMin"是收起后橫幅的div，class="Btn"是“展開/收起”的箭頭按鈕圖標(biāo)。

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()是點(diǎn)擊“收起”箭頭圖標(biāo)時(shí)的動(dòng)畫：大橫幅向上滑動(dòng)（slideUp），小橫幅向下滑動(dòng)（slideDown）。

jQuery(".bannerMin .Btn").click()是點(diǎn)擊“展開”箭頭圖標(biāo)時(shí)的動(dòng)畫：小橫幅向上滑動(dòng)（slideUp），大橫幅向下滑動(dòng)（slideDown）。

setTimeout()是打開頁面時(shí)先“展開”，3.5秒后“收起”的效果。

標(biāo)簽: css  橫幅  banner