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

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

广告简介

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

广告图片

H545f7ebd99ed4587b8b4aad7091ddfc81

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>  

 

芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:29139260
OKMG®软件中心 » 可关闭缩放展开的底部浮动广告特效

发表评论