javascript 模拟京东关闭广告栏 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         .site-nav {
12             height: 30px;
13             background-color: #ccc;
14         }
15         .top-banner {
16             background-color: orange;
17         }
18         .w {
19             width: 1200px;
20             height: 80px;
21             background-color: pink;
22             margin: 0 auto;
23             position: relative;
24         }
25         .search {
26             width: 1200px;
27             height: 80px;
28             background-color: lemonchiffon;
29             margin: 0 auto;
30         }
31         a {
32             position: absolute;
33             top: 10px;
34             right: 10px;
35             width: 25px;
36             height: 25px;
37             text-align: center;
38             line-height: 25px;
39             background-color: #000;
40             color: #fff;
41             text-decoration: none;
42 
43         }
44     </style>
45 </head>
46 <body>
47     <div class="site-nav"></div>
48     <div class="top-banner" style="opacity: 1">
49         <div class="w">
50             <a href="#">×</a>
51         </div>
52     </div>
53     <div class="search"></div>
54 
55     <script>
56         //获取事件源
57         var topBanner = document.getElementsByClassName("top-banner")[0];
58         var a = topBanner.children[0].firstElementChild || topBanner.children[0].firstChild;
59         //定义定时器
60         var timer = null;
61         a.onclick = function(){
62             timer = setInterval(function(){
63                 topBanner.style.opacity -=.1;
64                 if (topBanner.style.opacity < 0) {
65                     topBanner.style.display = "none";
66                     clearInterval(timer);
67                 }
68             },50);
69         }
70     </script>
71 
72 </body>
73 </html>

 

posted @ 2018-04-14 21:07  叶子玉  阅读(682)  评论(0)  编辑  收藏  举报