免费
  • 文章介绍
  • 网站建设

    目 录

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

    广告简介

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

    广告图片

    可关闭缩放展开的底部浮动广告特效-芒果源码

    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>  
    
    

     

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    购买的源码有问题 怎么办?
    郑重声明:仅限于商业源码可以提供技术支持且保证源码安全可用。 其余源码仅供参考学习。 而且源码在逐步下架。预计两个月内,本站所有源码 全部都是商用源码。
    买完的源码不想要了,可以退款么?
    非常抱歉,因为源码的可复制性和传播性。所有源码一经出售不得退款。 并非我们这样,所有的IT开发行业都是如此。
    源码没有我想要的,怎么办?
    非常不好意思呦!因为优秀的成品源码是有限的,如果平台上没有符合您需求的源码,可以联系OKMG客服解决,定制或者二开。 不过为了给大家一个良好的体验,平台发布的所有商业源码都是我们认可,且测试过的。 优秀才推荐,优秀才出售。
    我有源码,可以发布到平台上么?
    可以的,如果你是正版作者 可以联系我们。 但盗版勿扰。
    我是作者,你们家源码有我的盗版怎么办?
    非常抱歉,由于大部分源码都是互联网上收集的。收集到的源码 其中一部分 我们已经找到了作者 并且替换为正版代理。剩余的盗版 有些是因为时间紧 还没整理完成,还有部分是没有找到原作者的联系方式。 可以联系平台客服提供软著或证据 我们五分钟内下架处理。也可以与我们合作。 OKMG向正版致敬! 正因为我们是同行,所以我们清楚正版的创作是多么艰辛。
    芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:925296647
    芒果源码 » 可关闭缩放展开的底部浮动广告特效

    发表评论

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: meng@yimiaonet.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果对这款程序不满意,还可以联系我们定制开发哟!

    联系OKMG技术专家

    @OKMG
    https://www.okmg.cn

    扫码关注「OKMG」微信公众号

    807+

    总资源

    807+

    实用教程

    849+

    本站会员

    1092天+

    累计服务

    333719次+

    总访问次数

    01:52:18