联动动画 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         img{
13             vertical-align: top;
14         }
15 
16         #box{
17             position: fixed;
18             right: 0;
19             bottom: 0;
20         }
21 
22         #close{
23             width: 25px;
24             height: 25px;
25             background-color: transparent;
26             position: absolute;
27             right: 0;
28             top: 0;
29             cursor: pointer;
30         }
31 
32     </style>
33 </head>
34 <body>
35     <div id="box">
36         <span id="close"></span>
37         <div id="top">
38             <img src="images/top.jpg" alt="">
39         </div>
40         <div id="bottom">
41             <img src="images/bottom.jpg" alt="">
42         </div>
43     </div>
44 <script src="js/MyTool.js"></script>
45 <script>
46     window.addEventListener('load', function (ev) {
47         myTool.$('close').addEventListener('click', function () {
48             myTool.buffer(myTool.$('bottom'), {'height': 0}, function () {
49                 myTool.buffer(myTool.$('box'), {'width': 0}, function () {
50                     myTool.$('close').style.display = 'none';
51                 })
52             })
53         });
54     });
55 </script>
56 </body>
57 </html>

 

posted @ 2019-07-20 12:24  疏影横斜水清浅  阅读(218)  评论(1)    收藏  举报