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