【折腾代码】可自由缩放展开或关闭的底部浮动广告特效代码

挺好玩 就分享出来啦 图片链接自己修改哈 都在文件中

演示：https://make.ly522.com/dbggtx/

演示图

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="http://www.ly522.com">查看详情</a>
</div>
<div id="xcx-ad-back" class="xcx-ad-back" onclick="target_disa();" ></div>

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";
}