底部懸浮通欄可以關閉廣告位詳解（一）

效果一：

1.首先，整個底部懸浮通欄廣告是固定在瀏覽器的底部，隨着瀏覽器的滾動，底部懸浮廣告始終在瀏覽器窗口中。這里有幾個關鍵點：通欄，固定，黑色。

所以:首先我們必須給懸浮通欄廣告整體一個100%的寬度，其次給它設定固定定位，固定在瀏覽器底部，背景色為黑色，透明度為0.7。

.footfixed{
　  width:100%; 
　  height:140px;     /* 圖片大小，寬度必須100% */
　　position:fixed;
　　bottom:0;         /*固定定位，固定在瀏覽器底部。*/
　　background: #081628;
　　opacity: .7;    /*Chrome、Safari、Firefox、Opera */ 
　  filter:alpha(opacity=70);/* 針對 IE8 以及更早的版本 */
    z-index: 99999;
 }

2. 底部懸浮通欄廣告的圖片，可以看出比背景要高（背景height:140px，內圖height: 218px）

且整體內容部分居中。

.fimg {
    height: 218px;        /*注意此處圖片高度高於140px*/
    width: 1190px; 
    margin: 0px auto;    /*整體內容部分居中*/
}

然而由於底部懸浮廣告內容部分高度218px大於設定的父元素的高度140px，高度相差78px

產生如下效果，圖片沒能完成的展現出來：

這需要圖片上移78px，需要對整個底部懸浮廣告內容部分整體做相對定位

.fimg {
    position: relative;    /*父元素相對定位*/
    top:-78px;
}

結果：

這里有個問題：

圖片不是很清楚，因為加了透明度。

解決這個問題，用一個div來設置背景，而不在.footfix 里設置背景

<div class="ftbj"></div> 

.ftbj{
      height:100%;
      width:100%;
      position: absolute;
      top: 0;
      left: 0;　　　　
      background:#081628;
      opacity: .7;/*Chrome、Safari、Firefox、Opera */ 
      filter: alpha(opacity=70);}/* 針對 IE8 以及更早的版本 */
}
 .footfixed{
      width:100%; 
      height:140px; /* 圖片大小，寬度必須100% */ 
      position:fixed; 
      bottom:0; /*固定定位，固定在瀏覽器底部。*/
      z-index: 99999;
 }

這樣圖片效果：

這樣就清楚多了。

3.其中關閉按鈕的效果：

首先按鈕是由圖片通過定位實現固定在整個底部懸浮廣告圖片右上角。需設定圖片大小，圖片引入路徑，需要對整個底部懸浮廣告內容部分整體做相對定位，關閉按鈕是做絕對定位

.fimg {
    position: relative;    /*父元素相對定位*/
}
.close {
    width: 33px;
    height: 33px;         /* 圖片大小 */
    background: url(images/close.png) no-repeat center center;    /*圖片引入路徑 */
    position: absolute;
    right: 15px;
    top: 85px;             /*通過定位實現固定固定在整個底部懸浮廣告圖片右上角 */
}

其次，鼠標移到關閉按鈕上，有小手出現，關閉按鈕旋轉。

為了產生動畫效果，加transition

 .close {
     transition: .5s;
     cursor: pointer;   /*小手 */
} 
 .close:hover { 
     transform: rotate(180deg);  
     -ms-transform: rotate(180deg);     /* IE 9 */
     -moz-transform: rotate(180deg);    /* Firefox */
     -webkit-transform: rotate(180deg);    /* Safari 和 Chrome */ 
     -o-transform: rotate(180deg);       /* Opera */
} /*旋轉 圖片*/

 

然后是點擊關閉按鈕，廣告向下消失，側邊出現效果

#fimg-min{
     width: 80px;
     height: 140px;                     /* 圖片大小 */
     position: fixed; 
     bottom: 0px; 
     left: 0px;                         /*定位*/    
     display: none;                    /*隱藏*/
     cursor: pointer;                /*小手 */
     z-index: 99999;
}

 

點擊圖中圈出來的圖標，底部廣告再次出現

<script>
$(document).ready(function(){
    $(".close").click(function () {
        $('.footfixed').animate(
            {height: '10px', opacity: '0.4'}, "slow", function () {
        $('.footfixed').hide();
        $('#fimg-min').show();
        });
    });    
    $('#fimg-min').click(function(){
            $('.footfixed').show().css({height:'140px',opacity:'1'});
            $('#fimg-min').hide();
    });    
});
</script>
         

注：在ie9以下瀏覽器中關閉按鈕圖片旋轉效果未能實現。

注意：本文為原創，轉載請以鏈接形式標明本文地址 ，謝謝合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5546441.html