1. 程式人生 > >案例:原生JS實現360開機動畫

案例:原生JS實現360開機動畫

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box {
      width: 322px;
      position: fixed;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }

    span {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 20px;
      cursor: pointer;
    }

  </style>
</head>
<body>
<div class="box" id="box">
  <span id="closeButton"></span>
  <div class="hd" id="headPart">
    <img src="images/t.jpg" alt=""/>
  </div>
  <div class="bd" id="bottomPart">
    <img src="images/b.jpg" alt=""/>
  </div>
</div>
<script src="common.js"></script>
<script>
  my$("closeButton").onclick=function () {
    animate(document.getElementById("bottomPart"),{"height":0},function () {
     animate(document.getElementById("box"),{"width":0})
    })
  };
</script>
<!--<script>-->

  <!--my$("closeButton").onclick=function () {-->
    <!--//設定最下面的div的高漸漸的變成0-->
    <!--animate(my$("bottomPart"),{"height":0},function () {-->
      <!--animate(my$("box"),{"width":0});-->
    <!--});-->
  <!--};-->

<!--</script>-->
</body>
</html>