技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

網頁頂部大橫幅#可展開收起#【CSS+jQuery源碼】

作者:admin    時間:2020-3-14 11:23:5    瀏覽:

很多網站在打開時,頂部首先展開一條大橫幅,幾秒后自動收起,但并非消失,這種廣告效果比較好,因為它讓人一定注意到它的存在,并看到它的廣告內容。本文就介紹一下這個廣告的實現方法,使用的是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.4429883.live/" target="_blank"></A>
</DIV>
  </DIV>
  <DIV class="bannerMin">
    <DIV class="main">
      <DIV class="Btn"></DIV>
   <A href="http://www.4429883.live/" 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  
  • IT熱文
  • 站長推薦
陕西11选5中奖助手 微乐真人麻将下载 精选三码中特期期稳准 数字打码赚钱软件 股票发行注册制度 江苏快3今天推荐号码 山水云南麻将昆明玩法 河南体彩泳坛夺金200期 15选5开奖号码查询 管家婆精选四肖期期资料 美国股市今日行情