- <!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>
来源: http://www.bubuko.com/infodetail-2562474.html