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

广告简介

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

广告图片

CSS

*{ margin:0; border:0;}  
.fix-bottombottom-container{  
    width: 100%;  
    height222px;  
    positionfixed;  
    bottombottom: 0;  
    left: 0;  
    z-index: 999;  
    backgroundurl(“../images/AprilFools’DayBanner.png”center no-repeat;  
}  

.fix-bottombottom-container .close-icon{  
    width24px;  
    height25px;  
    positionabsolute;  
    top100px;  
    rightright: 50%;  
    margin-right: –590px;  
    cursorpointer;  
    -webkit-transition: -webkit-transform .3s;  
    -moz-transition: -moz-transform .3s;  
    -ms-transition: -ms-transform .3s;  
    -o-transition: -o-transform .3s;  
    transition: transform .3s;  
    backgroundurl(“../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{  
    width155px;  
    height130px;  
    positionfixed;  
    left: –155px;  
    bottombottom: 0;  
    cursorpointer;  
    z-index: 999;  
    backgroundurl(“../images/AprilFools’DayMini.png”left no-repeat;  
}  

.xcx-ad-container{  
    width: 100%;  
    height130px;  
    positionfixed;  
    bottombottom: 0;  
    left: 0;  
    z-index: 999;  
    backgroundurl(../images/xcx-ad-bg.png) center no-repeat;  
}  

.xcx-ad-container .close-ico{  
    width26px;  
    height26px;  
    positionabsolute;  
    top15px;  
    rightright: 50%;  
    margin-right: –575px;  
    cursorpointer;  
    -webkit-transition: -webkit-transform .3s;  
    -moz-transition: -moz-transform .3s;  
    -ms-transition: -ms-transform .3s;  
    -o-transition: -o-transform .3s;  
    transition: transform .3s;  
    backgroundurl(../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{  
    positionabsolute;  
    rightright: 50%;  
    margin-right: –466px;  
    top60px;  
    width108px;  
    height28px;  
    line-height28px;  
    border2px solid #01bafe;  
    border-radius: 20px;  
    color#fff;  
    font-size14px;  
    text-aligncenter;  
    background#01a8fe;  
}  

.xcx-ad-container .more-two{  
    positionabsolute;  
    rightright: 42%;  
    margin-right: –320px;  
    top50px;  
    width100px;  
    height28px;  
    line-height28px;  
    border-radius: 5px;  
    color#fff;  
    font-size14px;  
    text-aligncenter;  
    text-decorationnone;  
    background#fd3dce;  
    border2px solid #fd3dce;  
}  

.xcx-ad-container .more-two i{  
    displayinlineblock;  
    width17px;  
    height17px;  
    backgroundurl(“../images/ej-ico.png”no-repeat;  
    vertical-alignmiddle;  
    margin-right6px;  
}  

.xcx-ad-back{  
    width144px;  
    height130px;  
    left:0;  
    positionfixed;  
    bottombottom: 0;  
    cursorpointer;  
    z-index: 998;  
    backgroundurl(../images/xcx-leftfloat-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>

 

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

给TA买糖
共{{data.count}}人
人已赞赏
wordpress网站建设

WordPress 主题 B2 幻灯片美化滑动视差模块

2020-3-10 2:01:39

wordpress网站建设

WordPress 主题 仿B站404页面

2020-3-11 10:22:04

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索