zoukankan      html  css  js  c++  java
  • 联动动画

     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              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>
  • 相关阅读:
    better-scroll 介绍
    promise 异步编程
    vue网址路由的实时检测
    浏览器本地存储的使用
    获取元素的位置
    如何设置动画的运动效果
    实现对称加密及非对称公钥加密
    Centos 7系统启动修复
    Centos 7服务启动文件
    内核编译-4.12
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11217322.html
Copyright © 2011-2022 走看看