WIEN 定制

设计源于灵感,灵感始于积累。

原生js仿APP封面广告

效果图:fengAd.png

html代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>原生js仿APP封面广告</title>
    <style>
    *{padding:0;margin:0}
    .feng-ad{position:fixed;width:100%;height:100%;top:0;z-index: 1000;background-position: center;}
    .feng-ad .time-box{position:fixed;right:10px;top:10px;z-index:999;display:block;text-align:center;background:rgba(0,0,0,.4);border-radius:40px;font-size:12px;color:#fff;padding:3px 8px}
    .feng-ad .time-box i{font-style:normal;}
    .feng-ad .feng-inner{position:absolute;width:100%;bottom:0;left:0;background:#fff;padding-top:10%;padding-bottom:20%;}
    .feng-ad .feng-inner .ad-text{padding:0 10%;text-align:center;}
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <div id="fengAd" class="feng-ad" style="background-image: url(img/1.jpg);" >
        <div class="time-box">跳过&nbsp;<i id="time"></i>s</div>
        <div class="feng-inner">
            <div class="ad-text">
                <h2>Wien Designs设计</h2>
                <p>设计源于灵感,灵感始于积累。</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var int=setInterval("clock()", 1000);
        var num=3;
        var time=document.getElementById("time");
        time.innerHTML=num;
        function clock(){
            num>0 ? num-- : clearInterval(int);
            time.innerHTML=num;
            var timeSecond=time.innerHTML;
            if (timeSecond == 0) {
                //document.getElementById("fengAd").style.display="none"
            }
        }
    </script>
  </body>
</html>


附件

下载地址1

评论