可关闭缩放展开的底部浮动广告特效

可关闭缩放展开的底部浮动广告特效

广告简介

打开网页后在底部会显示横向的广告图像,可以点击缩放关闭，关闭后也可预留在左侧底部的位置上，效果非常不错，这里推荐给大家。

广告图片

CSS

    *{ margin:0; border:0;}  
      
    .fix-bottombottom-container{  
        width: 100%;  
        height: 222px;  
        position: fixed;  
        bottombottom: 0;  
        left: 0;  
        z-index: 999;  
        background: url(“../images/AprilFools’DayBanner.png”) center no-repeat;  
    }  
    .fix-bottombottom-container .close-icon{  
        width: 24px;  
        height: 25px;  
        position: absolute;  
        top: 100px;  
        rightright: 50%;  
        margin-right: –590px;  
        cursor: pointer;  
        -webkit-transition: -webkit-transform .3s;  
        -moz-transition: -moz-transform .3s;  
        -ms-transition: -ms-transform .3s;  
        -o-transition: -o-transform .3s;  
        transition: transform .3s;  
        background: url(“../images/close-afd-icon.png”) center no-repeat;  
    }  
    .fix-bottombottom-container .close-icon:hover{  
        -webkit-transform: rotate(180deg);  
        -moz-transform: rotate(180deg);  
        -ms-transform: rotate(180deg);  
        -o-transform: rotate(180deg);  
        transform: rotate(180deg);  
    }  
      
      
    .fix-bottombottom-pack{  
        width: 155px;  
        height: 130px;  
        position: fixed;  
        left: –155px;  
        bottombottom: 0;  
        cursor: pointer;  
        z-index: 999;  
        background: url(“../images/AprilFools’DayMini.png”) left no-repeat;  
    }  
      
      
    .xcx-ad-container{  
        width: 100%;  
        height: 130px;  
        position: fixed;  
        bottombottom: 0;  
        left: 0;  
        z-index: 999;  
        background: url(../images/xcx-ad-bg.png) center no-repeat;  
    }  
      
    .xcx-ad-container .close-ico{  
        width: 26px;  
        height: 26px;  
        position: absolute;  
        top: 15px;  
        rightright: 50%;  
        margin-right: –575px;  
        cursor: pointer;  
        -webkit-transition: -webkit-transform .3s;  
        -moz-transition: -moz-transform .3s;  
        -ms-transition: -ms-transform .3s;  
        -o-transition: -o-transform .3s;  
        transition: transform .3s;  
        background: url(../images/xcx-ad-close-ico.png) center no-repeat;  
    }  
    .xcx-ad-container .close-ico:hover{  
        -webkit-transform: rotate(180deg);  
        -moz-transform: rotate(180deg);  
        -ms-transform: rotate(180deg);  
        -o-transform: rotate(180deg);  
        transform: rotate(180deg);  
    }  
      
    .xcx-ad-container .more{  
        position: absolute;  
        rightright: 50%;  
        margin-right: –466px;  
        top: 60px;  
        width: 108px;  
        height: 28px;  
        line-height: 28px;  
        border: 2px solid #01bafe;  
        border-radius: 20px;  
        color: #fff;  
        font-size: 14px;  
        text-align: center;  
        background: #01a8fe;  
    }  
    .xcx-ad-container .more-two{  
        position: absolute;  
        rightright: 42%;  
        margin-right: –320px;  
        top: 50px;  
        width: 100px;  
        height: 28px;  
        line-height: 28px;  
        border-radius: 5px;  
        color: #fff;  
        font-size: 14px;  
        text-align: center;  
        text-decoration: none;  
        background: #fd3dce;  
        border: 2px solid #fd3dce;  
    }  
    .xcx-ad-container .more-two i{  
        display: inline–block;  
        width: 17px;  
        height: 17px;  
        background: url(“../images/ej-ico.png”) no-repeat;  
        vertical-align: middle;  
        margin-right: 6px;  
    }  
    .xcx-ad-back{  
        width: 144px;  
        height: 130px;  
        left:0;  
        position: fixed;  
        bottombottom: 0;  
        cursor: pointer;  
        z-index: 998;  
        background: url(../images/xcx-left–float-bg.png) left no-repeat;  
    }  

JS

    function target_dis(){  
        var  target=document.getElementById(“xcx-ad”);  
        target.style.display=“none”;  
        }  
    function target_disa(){  
        var  target=document.getElementById(“xcx-ad”);  
        target.style.display=“block”;  
        }  

HTML

    <div id=“xcx-ad” class=“xcx-ad-container”>  
           <div id=“close-ad” class=“close-ico” onclick=“target_dis();” ></div>  
           <a class=“more-two” target=“_blank” href=“https://www.sbkko.com/”>查看详情</a>  
    </div>  
    <div id=“xcx-ad-back” class=“xcx-ad-back” onclick=“target_disa();” ></div>