javascript 模拟京东关闭广告栏

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .site-nav {

             height: 30px;

             background-color: #ccc;

         }

         .top-banner {

             background-color: orange;

         }

         .w {

             width: 1200px;

             height: 80px;

             background-color: pink;

             margin: 0 auto;

             position: relative;

         }

         .search {

             width: 1200px;

             height: 80px;

             background-color: lemonchiffon;

             margin: 0 auto;

         }

         a {

             position: absolute;

             top: 10px;

             right: 10px;

             width: 25px;

             height: 25px;

             text-align: center;

             line-height: 25px;

             background-color: #000;

             color: #fff;

             text-decoration: none;

         }

     </style>

 </head>

 <body>

     <div class="site-nav"></div>

     <div class="top-banner" style="opacity: 1">

         <div class="w">

             <a href="#">×</a>

         </div>

     </div>

     <div class="search"></div>

     <script>

         //获取事件源

         var topBanner = document.getElementsByClassName("top-banner")[0];

         var a = topBanner.children[0].firstElementChild || topBanner.children[0].firstChild;

         //定义定时器

         var timer = null;

         a.onclick = function(){

             timer = setInterval(function(){

                 topBanner.style.opacity -=.1;

                 if (topBanner.style.opacity < 0) {

                     topBanner.style.display = "none";

                     clearInterval(timer);

                 }

             },50);

         }

     </script>

 </body>

 </html>
巴特西

javascript 模拟京东关闭广告栏

最新文章

热门文章
