|
|
|
|
|
很多網(wǎng)站在打開時(shí),頂部首先展開一條大橫幅,幾秒后自動(dòng)收起,但并非消失,這種廣告效果比較好,因?yàn)樗屓艘欢ㄗ⒁獾剿拇嬖?,并看到它的廣告內(nèi)容。本文就介紹一下這個(gè)廣告的實(shí)現(xiàn)方法,使用的是css+jQuery技術(shù),代碼很少,并且很簡單。
網(wǎng)頁頂部大橫幅#可展開收起#
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;
。
<DIV class="topBanner">
<DIV class="bannerMax">
<DIV class="main">
<DIV class="Btn"></DIV>
<A href="http://howtostagehomes.com/" target="_blank"></A>
</DIV>
</DIV>
<DIV class="bannerMin">
<DIV class="main">
<DIV class="Btn"></DIV>
<A href="http://howtostagehomes.com/" target="_blank"></A>
</DIV>
</DIV>
</DIV>
代碼解釋
class="topBanner"
的div定義橫幅的位置,class="bannerMax"
是展開后橫幅的div,class="bannerMin"
是收起后橫幅的div,class="Btn"
是“展開/收起”的箭頭按鈕圖標(biāo)。
<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秒后“收起”的效果。