|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
網頁底部大橫幅#可關閉變小圖#【實例演示/源碼下載】
作者:admin 時間:2020-2-28 20:7:16 瀏覽:前面介紹過兩個實例《網頁頂部大橫幅#可展開收起#【CSS+jQuery源碼】》《網頁頂部banner大橫幅#自適應大小#可關閉【CSS3實例源碼】》 ，它們都是頂部橫幅，本文將介紹類似的實例，網頁底部大橫幅#可關閉變小圖#【實例演示/源碼下載】。
網頁底部大橫幅#可關閉變小圖# - 圖1
網頁底部大橫幅，關閉后變小圖 - 圖2
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<title>jQuery底部橫幅廣告，可關閉變小圖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.footer_kf { height:100px; width:100%; position:fixed; bottom:0; left:0; z-index:8888;}
.fd_box { height:100px; position:fixed; width:100%; bottom:0; left:0; z-index:666;}
.fd_box01 { width:100%; height:auto; position:fixed; bottom:0;}
.fd_box02 { margin:0 auto; width:100%; height:auto; bottom:0; z-index:888;}
.fd_tu { width:100%; height:100px; bottom:0; left:0; }
.fd_tu img { width:100% ;position:fixed;bottom:0;}
.fd_gb { width:20px; height:20px; float:right; right:2px; position:relative;}
/*小圖-在左下角*/
.fd_little { display:block; width:145px; height:145px; position:fixed; left:0; bottom:25%; background:url(images/145x145.png) no-repeat left top;}
/*小圖-在右下角*/
/*.fd_little { display:block; width:145px; height:145px; position:fixed; right:0; bottom:25%; background:url(images/145x145.png) no-repeat left top;}*/
</style>
</head>
<body>
<a href="javascript:void(0)" class="fd_little icon_keifu" style="display:none;"></a>
<div class="keifu">
<div class="footer_kf keifu_box">
<div class="fd_box">
<div class="fd_box01">
<div class="fd_box02">
<div class="fd_tu"><a href="#" target="_blank"><img id="footer_banner" src="images/1440-70.jpg"></a></div>
<div class="fd_gb"><a href="javascript:void(0)" class="keifu_close"><img id="footer_close" src="images/close-12x12.png"></a></div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var KF = $(".footer_kf");
var wkbox = $(".keifu_box");
var kf_close = $(".keifu .keifu_close");
var icon_keifu = $(".icon_keifu");
var kH = wkbox.height();
var kW = wkbox.width();
var wH = $(window).height();
KF.css({height:kH});
icon_keifu.css("bottom",parseInt((kH-10)/5));
var KF_top = (wH-kH)/0;
if(KF_top<0) KF_top=0;
KF.css("top",KF_top);
$(kf_close).click(function(){
KF.animate({width:"0"},200,function(){
wkbox.hide();
icon_keifu.show();
KF.animate({width:26},300);
});
});
$(icon_keifu).click(function(){
$(this).hide();
wkbox.show();
KF.animate({width:kW},200);
});
//關閉按鈕位置
resizeBannerImage();
});
//當窗口改變寬度時執(zhí)行此函數(shù)，重設關閉按鈕位置
window.onresize=resizeBannerImage;
function resizeBannerImage()
{
var BH = $("#footer_banner").height();
$(".fd_gb").css("height",BH);
$(".fd_gb").css("bottom",0);
$(".footer_close").css("margin-top","5px");
}
</script>
</body>
</html>
代碼解釋
1、CSS
1）CSS主要是定義橫幅的div位置，本實例嵌套了很多div，注意各個class的代碼，尤其是div的position屬性，有的是fixed，有的是relative。
2）關閉大橫幅后變成小圖在左下角，CSS代碼.fd_little可以定位這個小圖的大小尺寸（高和寬），還有位置，比如可定義放在右下角（代碼看實例里的注釋）。這里要注意圖片的位置路徑要正確。
2、HTML
本實例div代碼比較多，有6、7個div那么多，層層嵌套，各div有自己的class，不能寫錯。
最內層的兩個div，class="fd_tu"這個放大橫幅圖片，class="fd_gb"這個放關閉按鈕圖片。遷移代碼時注意圖片位置路徑要正確。
3、jQuery
首先要引用jQuery庫文件，庫文件在壓縮包里，注意路徑寫正確。
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
jQuery主要是實現(xiàn)點擊關閉按鈕后大橫幅消失，小圖在左下角出現(xiàn)的效果。
而為了滿足網頁自適應，此Query代碼使用了resizeBannerImage()來實現(xiàn)關閉圖片按鈕隨著大橫幅高寬的變化而不斷調整其位置，讓關閉圖片按鈕始終在大橫幅的右上角那里。
您可能對以下文章也感興趣
- 站長推薦
