网页底部大横幅#可关闭变小图#【实例演示/源码下载】

技术频道 - html技术

网页底部大横幅#可关闭变小图#【实例演示/源码下载】

作者:admin 时间:2020-2-28 20:7:16 浏览:

前面介绍过两个实例《网页顶部大横幅#可展开收起#【CSS+jQuery源码】》《网页顶部banner大横幅#自适应大小#可关闭【CSS3实例源码】》，它们都是顶部横幅，本文将介绍类似的实例，网页底部大横幅#可关闭变小图#【实例演示/源码下载】。

网页底部大横幅#可关闭变小图#

网页底部大横幅#可关闭变小图# - 图1

网页底部大横幅，关闭后变小图

网页底部大横幅，关闭后变小图 - 图2

demo

完整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();

});

//当窗口改变宽度时执行此函数，重设关闭按钮位置
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>