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>