效果一：
1.首先，整個底部懸浮通欄廣告是固定在瀏覽器的底部，隨著瀏覽器的滾動，底部懸浮廣告始終在瀏覽器窗口中。這里有幾個關(guān)鍵點(diǎn)：通欄，固定，黑色。
所以:首先我們必須給懸浮通欄廣告整體一個100%的寬度，其次給它設(shè)定固定定位，固定在瀏覽器底部，背景色為黑色，透明度為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 以及更早的版本 */}2. 底部懸浮通欄廣告的圖片，可以看出比背景要高（背景height:140px，內(nèi)圖height: 218px）
且整體內(nèi)容部分居中。
.fimg { height: 218px; /*注意此處圖片高度高于140px*/ width: 1190px; margin: 0px auto; /*整體內(nèi)容部分居中*/ }然而由于底部懸浮廣告內(nèi)容部分高度218px大于設(shè)定的父元素的高度140px，高度相差78px
產(chǎn)生如下效果，圖片沒能完成的展現(xiàn)出來：
這需要圖片上移78px，需要對整個底部懸浮廣告內(nèi)容部分整體做相對定位
.fimg { position: relative; /*父元素相對定位*/ top:-78px; }結(jié)果：
這里有個問題：
圖片不是很清楚，因為加了透明度。
解決這個問題，用一個div來設(shè)置背景，而不在.footfixed里設(shè)置背景色。
<div class="ftbj"></div>
.ftbj{ position: absolute; background:#081628; height:100%; width:100%; top: 0; left: 0; opacity: .7;/*Chrome、Safari、Firefox、Opera */ filter: alpha(opacity=70);}/* 針對 IE8 以及更早的版本 */.footfixed{ width:100%; height:140px; /* 圖片大小，寬度必須100% */ position:fixed; bottom:0; /*固定定位，固定在瀏覽器底部。*/ background: #081628; opacity: .7; /*Chrome、Safari、Firefox、Opera */ filter:alpha(opacity=70);/* 針對 IE8 以及更早的版本 */}這樣一來，效果圖片：
這樣就清楚多了。
3.其中關(guān)閉按鈕的效果：
首先按鈕是由圖片通過定位實(shí)現(xiàn)固定在整個底部懸浮廣告圖片右上角。需設(shè)定圖片大小，圖片引入路徑，需要對整個底部懸浮廣告內(nèi)容部分整體做相對定位，關(guān)閉按鈕是做絕對定位
.fimg { position: relative; /*父元素相對定位*/}.close { width: 33px; height: 33px; /* 圖片大小 */ background: url(images/close.png) no-repeat center center; /*圖片引入路徑 */ position: absolute; right: 15px; top: 85px; /*通過定位實(shí)現(xiàn)固定固定在整個底部懸浮廣告圖片右上角 */}其次，鼠標(biāo)移到關(guān)閉按鈕上，有小手出現(xiàn)，關(guān)閉按鈕旋轉(zhuǎn)。
為了產(chǎn)生動畫效果，加transition
.close { transition: .5s; cursor: pointer; /*通過定位實(shí)現(xiàn)固定固定在整個底部懸浮廣告圖片右上角 */}.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 */} /*旋轉(zhuǎn) 圖片*/然后是點(diǎn)擊關(guān)閉按鈕，廣告消失，側(cè)邊出現(xiàn)效果
#fimg-min{ width: 80px; height: 140px; /* 圖片大小 */ position: fixed; bottom: 0px; left: 0px; /*定位*/ display: none; /*隱藏*/ cursor: pointer; /*小手 */}點(diǎn)擊圖中圈出來的圖標(biāo)，底部廣告再次出現(xiàn)
<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以下瀏覽器中關(guān)閉按鈕圖片旋轉(zhuǎn)效果未能實(shí)現(xiàn)。
以上這篇底部懸浮通欄可以關(guān)閉廣告位的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
