仿360开机效果

1.布局

<div class="box">
  <span id="close"></span>
  <div class="hd" id="hd">
     <img src="images/b.jpg">
  </div>
  <div class="td" id="td">
      <img src="images/t.jpg">
  </div>
</div>

2.布局页面位置

    .box{
        width:322px;
        position: fixed;
        bottom: 0;
        right: 0;
    }
    span{
        position: absolute;
        top:0;
        right: 0;
        width: 30px;
        height: 20px;
        cursor: pointer;
    }
    <!--cursor表示鼠标的触手样式-->

3.在上一篇中，我们封装了缓动动画，这里我们不再重写一遍缓动框架啦。有需要的回到上一篇缓动框架复制代码 缓动框架

    <!--把缓动框架放到一个js文件中，取名叫Jqurey.js-->
    <script src="Jqurey.js"></script>
    <script>
        window.onload = function () {
        
            <!--获取标签-->
             var span = document.getElementById("close");
    var hd = span.parentNode;
    var td = document.getElementById("td");
            <!--绑定事件-->
             span.onclick = function () {
             <!--书写事件-->
             animate(td,{"height":0},function (){
                 animate(hd,{"width":0});
         });
    }
        
        }
    
    </script>

运行效果

Untitled3.gif