×

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

广告简介

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

广告图片

CSS

  1. *{ margin:0; border:0;}  
  2.   
  3. .fix-bottombottom-container{  
  4.     width: 100%;  
  5.     height222px;  
  6.     positionfixed;  
  7.     bottombottom: 0;  
  8.     left: 0;  
  9.     z-index: 999;  
  10.     backgroundurl(“../images/AprilFools’DayBanner.png”center no-repeat;  
  11. }  
  12. .fix-bottombottom-container .close-icon{  
  13.     width24px;  
  14.     height25px;  
  15.     positionabsolute;  
  16.     top100px;  
  17.     rightright: 50%;  
  18.     margin-right: –590px;  
  19.     cursorpointer;  
  20.     -webkit-transition: -webkit-transform .3s;  
  21.     -moz-transition: -moz-transform .3s;  
  22.     -ms-transition: -ms-transform .3s;  
  23.     -o-transition: -o-transform .3s;  
  24.     transition: transform .3s;  
  25.     backgroundurl(“../images/close-afd-icon.png”center no-repeat;  
  26. }  
  27. .fix-bottombottom-container .close-icon:hover{  
  28.     -webkit-transform: rotate(180deg);  
  29.     -moz-transform: rotate(180deg);  
  30.     -ms-transform: rotate(180deg);  
  31.     -o-transform: rotate(180deg);  
  32.     transform: rotate(180deg);  
  33. }  
  34.   
  35.   
  36. .fix-bottombottom-pack{  
  37.     width155px;  
  38.     height130px;  
  39.     positionfixed;  
  40.     left: –155px;  
  41.     bottombottom: 0;  
  42.     cursorpointer;  
  43.     z-index: 999;  
  44.     backgroundurl(“../images/AprilFools’DayMini.png”left no-repeat;  
  45. }  
  46.   
  47.   
  48. .xcx-ad-container{  
  49.     width: 100%;  
  50.     height130px;  
  51.     positionfixed;  
  52.     bottombottom: 0;  
  53.     left: 0;  
  54.     z-index: 999;  
  55.     backgroundurl(../images/xcx-ad-bg.png) center no-repeat;  
  56. }  
  57.   
  58. .xcx-ad-container .close-ico{  
  59.     width26px;  
  60.     height26px;  
  61.     positionabsolute;  
  62.     top15px;  
  63.     rightright: 50%;  
  64.     margin-right: –575px;  
  65.     cursorpointer;  
  66.     -webkit-transition: -webkit-transform .3s;  
  67.     -moz-transition: -moz-transform .3s;  
  68.     -ms-transition: -ms-transform .3s;  
  69.     -o-transition: -o-transform .3s;  
  70.     transition: transform .3s;  
  71.     backgroundurl(../images/xcx-ad-close-ico.png) center no-repeat;  
  72. }  
  73. .xcx-ad-container .close-ico:hover{  
  74.     -webkit-transform: rotate(180deg);  
  75.     -moz-transform: rotate(180deg);  
  76.     -ms-transform: rotate(180deg);  
  77.     -o-transform: rotate(180deg);  
  78.     transform: rotate(180deg);  
  79. }  
  80.   
  81. .xcx-ad-container .more{  
  82.     positionabsolute;  
  83.     rightright: 50%;  
  84.     margin-right: –466px;  
  85.     top60px;  
  86.     width108px;  
  87.     height28px;  
  88.     line-height28px;  
  89.     border2px solid #01bafe;  
  90.     border-radius: 20px;  
  91.     color#fff;  
  92.     font-size14px;  
  93.     text-aligncenter;  
  94.     background#01a8fe;  
  95. }  
  96. .xcx-ad-container .more-two{  
  97.     positionabsolute;  
  98.     rightright: 42%;  
  99.     margin-right: –320px;  
  100.     top50px;  
  101.     width100px;  
  102.     height28px;  
  103.     line-height28px;  
  104.     border-radius: 5px;  
  105.     color#fff;  
  106.     font-size14px;  
  107.     text-aligncenter;  
  108.     text-decorationnone;  
  109.     background#fd3dce;  
  110.     border2px solid #fd3dce;  
  111. }  
  112. .xcx-ad-container .more-two i{  
  113.     displayinlineblock;  
  114.     width17px;  
  115.     height17px;  
  116.     backgroundurl(“../images/ej-ico.png”no-repeat;  
  117.     vertical-alignmiddle;  
  118.     margin-right6px;  
  119. }  
  120. .xcx-ad-back{  
  121.     width144px;  
  122.     height130px;  
  123.     left:0;  
  124.     positionfixed;  
  125.     bottombottom: 0;  
  126.     cursorpointer;  
  127.     z-index: 998;  
  128.     backgroundurl(../images/xcx-leftfloat-bg.png) left no-repeat;  
  129. }  

JS

  1. function target_dis(){  
  2.     var  target=document.getElementById(“xcx-ad”);  
  3.     target.style.display=“none”;  
  4.     }  
  5. function target_disa(){  
  6.     var  target=document.getElementById(“xcx-ad”);  
  7.     target.style.display=“block”;  
  8.     }  

HTML

  1. <div id=“xcx-ad” class=“xcx-ad-container”>  
  2.        <div id=“close-ad” class=“close-ico” onclick=“target_dis();” ></div>  
  3.        <a class=“more-two” target=“_blank” href=“https://www.sbkko.com/”>查看详情</a>  
  4. </div>  
  5. <div id=“xcx-ad-back” class=“xcx-ad-back” onclick=“target_disa();” ></div>  

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新消息 消息中心
有新私信 私信列表
搜索