From 8816b444edd1e50e4209d82c585bc2e999baf4be Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sun, 23 Feb 2020 22:28:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=99=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleUploader/globalUploader.vue         | 202 ++++++++++++-
 src/views/demo/index.vue                      | 134 ++++++++-
 src/views/home/mobile/index.vue               |  47 +--
 src/views/test/360demo.html                   |  10 +-
 src/views/test/js点击触发动画.html            |  31 ++
 src/views/test/悬浮小球不旋转.html            | 281 ++++++++++++++++++
 6 files changed, 672 insertions(+), 33 deletions(-)
 create mode 100644 src/views/test/js点击触发动画.html
 create mode 100644 src/views/test/悬浮小球不旋转.html

diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue
index bcea80e..c98755a 100755
--- a/src/components/SimpleUploader/globalUploader.vue
+++ b/src/components/SimpleUploader/globalUploader.vue
@@ -20,13 +20,16 @@
       <uploader-btn id="folder-uploader-btn" ref="folderBtn" :directory="true">选择文件夹</uploader-btn>
 
       <uploader-list v-show="panelShow">
-        <div slot-scope="props" class="file-panel" :class="{'collapse': collapse}">
+        <div slot-scope="props" class="file-panel" :class="{'collapse': collapse}" :style="filePanel">
           <div class="file-title">
             <h2 class="files-title">文件列表</h2>
             <div class="operate">
-              <el-button type="text" class="button-collapse" :title="collapse ? '展开':'折叠' " @click="fileListShow">
-                <i class="iconfont" :class="collapse ? 'el-icon-circle-plus-outline': 'el-icon-remove-outline'"></i>
+              <el-button type="text" class="button-collapse" @click="shrink">
+                <i class="iconfont el-icon-position"></i>
               </el-button>
+              <!--<el-button type="text" class="button-collapse" :title="collapse ? '展开':'折叠' " @click="fileListShow">-->
+                <!--<i class="iconfont" :class="collapse ? 'el-icon-circle-plus-outline': 'el-icon-remove-outline'"></i>-->
+              <!--</el-button>-->
               <el-button type="text" class="button-collapse" title="关闭" @click="close">
                 <i class="iconfont el-icon-circle-close"></i>
               </el-button>
@@ -44,6 +47,20 @@
 
     </uploader>
 
+    <div v-if="isShrink" class="process-area" id="drag-ball" @click="expand">
+      <div class="process-anime">
+        <div class="cube-a" :style="{'top': -process-65+'%'}"></div>
+        <div class="cube-b" :style="{'top': -process-65+'%'}"></div>
+
+        <div v-if="process >= 100" class="done">
+          <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
+            <!--"M 14.1 27.2 l 7.1 7.2 l 16.7 -16.8"-->
+            <path d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -108,7 +125,10 @@ export default {
         waiting: '等待中'
       },
       panelShow: false, // 选择文件后，展示上传panel
-      collapse: false
+      collapse: false,
+      isShrink: false,
+      process: 50,
+      filePanel: {}
     }
   },
   computed: {
@@ -326,6 +346,41 @@ export default {
         this.collapse = false
       }
     },
+    // 展开球
+    expand() {
+      this.isShrink = false
+      this.filePanel = {
+        'width': '720px',
+        'height': '300px',
+      }
+    },
+    // 收缩成球
+    shrink(){
+      const that = this
+      setTimeout(function () {
+        that.isShrink = true
+        that.filePanel = {
+          'color': 'white',
+          'z-index': '-1',
+          'right': '66px',
+          'bottom': '66px',
+          'width': '0px',
+          'height': '0px',
+          cursor: 'pointer',
+          'border-radius': '50%',
+        }
+      },500)
+      this.filePanel = {
+        'color': 'white',
+        'z-index': '-1',
+        'right': '20px',
+        'bottom': '20px',
+        'width': '92px',
+        'height': '92px',
+        cursor: 'pointer',
+        'border-radius': '50%',
+      }
+    },
     close() {
       this.uploader.cancel()
       this.panelShow = false
@@ -405,9 +460,21 @@ export default {
         .file-panel {
             background-color: #fff;
             border: 1px solid #e2e2e2;
-            border-radius: 7px 7px 0 0;
             box-shadow: 0 0 10px rgba(0, 0, 0, .2);
 
+            right: 2%;
+            bottom: 2%;
+            width: 720px;
+            height: 300px;
+            color: black;
+            margin: auto;
+            overflow: hidden;
+            background-size: 100% 100%;
+            border-radius: 7px 7px 0 0;
+            position: fixed;
+            -webkit-transition: all .5s cubic-bezier(0.4, 0, 1, 1) 0s;
+            transition: all .5s cubic-bezier(0.4, 0, 1, 1) 0s;
+
             ul{
               white-space: nowrap;
               -webkit-overflow-scrolling: touch;
@@ -528,4 +595,129 @@ export default {
       position: absolute;
       clip: rect(0, 0, 0, 0);
     }
+
+
+
+    .process-area {
+      z-index: -1;
+      /*right: 20px;*/
+      /*bottom: 20px;*/
+      /*width: 92px;*/
+      /*height: 92px;*/
+      cursor: pointer;
+      background: #eee;
+      margin: auto;
+      overflow: hidden;
+      background-size: 100% 100%;
+      border-radius: 50%;
+      position: fixed;
+      animation: load-process-area .5s 1 linear forwards;
+      transition: .5s;
+    }
+    .process-anime {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border: 4px solid #fff;
+      transform: translate(-50%,-50%);
+      width: 90px;
+      height: 90px;
+      background: linear-gradient(45deg,#fde47c,#fdeca6);
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .process-anime .cube-a {
+      position: absolute;
+      left: 50%;
+      background: rgba(53,53,53,.3);
+      width: 130px;
+      height: 130px;
+      border-radius: 50px;
+      animation: fx-rotate 15s infinite linear;
+      transform-origin: 50% 50%;
+      transition: .5s;
+    }
+    .process-anime .cube-b {
+      position: absolute;
+      left: 50%;
+      background: #fff;
+      width: 130px;
+      height: 130px;
+      border-radius: 50px;
+      animation: fx-rotate 10s infinite reverse linear;
+      transform-origin: 50% 50%;
+      transition: .5s;
+    }
+
+    /**成功**/
+    .process-anime .done {
+      position: absolute;
+      width: 45px;
+      height: 45px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%) scale(2.25);
+    }
+    .process-anime .done .checkmark {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      display: block;
+      stroke-width: 2;
+      stroke: #fff;
+      stroke-miterlimit: 10;
+      box-shadow: inset 0 0 0 #fdda65;
+      animation: fill-data .4s ease-in-out .4s forwards,scale-data .3s ease-in-out .9s both;
+    }
+    .process-anime .done .checkmark__check {
+      transform: translate(2px,2px);
+      transform-origin: 50% 50%;
+      stroke-dasharray: 48;
+      stroke-dashoffset: 48;
+      animation: stroke-data .3s cubic-bezier(.65,0,.45,1) .8s forwards;
+    }
+
+    @keyframes fx-rotate {
+      0% {
+        transform: translate(-50%) rotate(0);
+      }
+      100% {
+        transform: translate(-50%,2px) rotate(365deg);
+      }
+    }
+
+    @keyframes scale-data {
+      0%, 100% {
+        transform: none;
+      }
+      50% {
+        transform: scale3d(1.1,1.1,1);
+      }
+    }
+    @keyframes fill-data {
+      100% {
+        box-shadow: inset 0 0 0 30px #fdda65;
+      }
+    }
+
+    @keyframes stroke-data {
+      100% {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    @keyframes load-process-area {
+      0% {
+        right: 66px;
+        bottom: 66px;
+         width: 0;
+         height: 0;
+       }
+      100% {
+        right: 20px;
+        bottom: 20px;
+        width: 92px;
+        height: 92px;
+      }
+    }
 </style>
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index 1db64ad..a41d9c0 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -1,9 +1,133 @@
 <template>
-  <wv-swipe :height="130" :autoplay="4000">
-    <wv-swipe-item style="background-color: #f44336">1</wv-swipe-item>
-    <wv-swipe-item style="background-color: #ffc107">2</wv-swipe-item>
-    <wv-swipe-item style="background-color: #03a9f4">3</wv-swipe-item>
-  </wv-swipe>
+  <div class="container">
+    <div class="process-area" id="drag-ball">
+      <div class="process-anime">
+        <div class="cube-a" style="top: -115%;"></div>
+        <div class="cube-b" style="top: -115%;"></div>
+
+        <div class="done">
+          <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
+            <!--"M 14.1 27.2 l 7.1 7.2 l 16.7 -16.8"-->
+            <path d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+  export default {
+  }
 </script>
+<style lang="scss" scoped>
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+  .process-area {
+    right: 2%;
+    bottom: 2%;
+    width: 92px;
+    height: 92px;
+    cursor: pointer;
+    background: #eee;
+    margin: auto;
+    overflow: hidden;
+    background-size: 100% 100%;
+    border-radius: 50%;
+    position: fixed;
+    transition: .5s;
+  }
+  .process-anime {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border: 4px solid #fff;
+    transform: translate(-50%,-50%);
+    width: 90px;
+    height: 90px;
+    background: linear-gradient(45deg,#fde47c,#fdeca6);
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  .process-anime .cube-a {
+    position: absolute;
+    left: 50%;
+    background: rgba(53,53,53,.3);
+    width: 130px;
+    height: 130px;
+    border-radius: 50px;
+    animation: fx-rotate 15s infinite linear;
+    transform-origin: 50% 50%;
+    transition: .5s;
+  }
+  .process-anime .cube-b {
+    position: absolute;
+    left: 50%;
+    background: #fff;
+    width: 130px;
+    height: 130px;
+    border-radius: 50px;
+    animation: fx-rotate 10s infinite reverse linear;
+    transform-origin: 50% 50%;
+    transition: .5s;
+  }
+
+  /**成功**/
+  .process-anime .done {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%) scale(2.25);
+  }
+  .process-anime .done .checkmark {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 2;
+    stroke: #fff;
+    stroke-miterlimit: 10;
+    box-shadow: inset 0 0 0 #fdda65;
+    animation: fill-data .4s ease-in-out .4s forwards,scale-data .3s ease-in-out .9s both;
+  }
+  .process-anime .done .checkmark__check {
+    transform: translate(2px,2px);
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation: stroke-data .3s cubic-bezier(.65,0,.45,1) .8s forwards;
+  }
+
+  @keyframes fx-rotate {
+     0% {
+       transform: translate(-50%) rotate(0);
+     }
+     100% {
+       transform: translate(-50%,2px) rotate(365deg);
+     }
+   }
+
+  @keyframes scale-data {
+    0%, 100% {
+      transform: none;
+    }
+    50% {
+      transform: scale3d(1.1,1.1,1);
+    }
+  }
+  @keyframes fill-data {
+    100% {
+       box-shadow: inset 0 0 0 30px #fdda65;
+    }
+  }
+
+  @keyframes stroke-data {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+</style>
diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
index 309b201..502d33f 100644
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@@ -40,23 +40,9 @@
 
       </van-sticky>
 
-      <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name"></van-cell>-->
-      <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name" :label="item.updateDate"></van-cell>-->
-      <van-cell class="list-item" center v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item)" :is-link="item.isFolder">
-          <!--<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>-->
+      <van-cell class="list-item" center v-for="item in fileList" :key="item.id" @click="fileClick(item)" :is-link="item.isFolder">
           <van-row>
             <van-col span="4" align="center" class="list-cell-icon">
-              <!--<svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />-->
-              <!--<svg-icon v-if="item.isFolder" icon-class="folder" />-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />-->
-              <!--<el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />-->
-              <!--<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />-->
-              <!--<svg-icon v-else icon-class="file" />-->
               <icon-file :item="item" :image-url="imageUrl"></icon-file>
             </van-col>
             <van-col span="16" class="list-item-content">
@@ -447,19 +433,44 @@
 
   .tab-bottom {
     padding: 0 0 25px 0;
+    .van-tabbar-item {
+      margin-top:25px;
+      animation:ordinary .4s forwards;
+      -moz-animation:ordinary .4s forwards; /* Firefox */
+      -webkit-animation:ordinary .4s forwards; /* Safari and Chrome */
+      -o-animation:ordinary .4s forwards; /* Opera */
+    }
+  }
+
+  @keyframes iphoneX
+  {
+    from {margin-top:25px;}
+    to {margin-top:-5px;}
+  }
+
+  @keyframes ordinary
+  {
+    from {margin-top:-5px;}
+    to {margin-top:25px;}
   }
 
   .tab-bottom-iphoneX {
     padding: 0 0 25px 0;
     .van-tabbar-item {
-      margin-top: -5px;
+      animation:iphoneX .4s forwards;
+      -moz-animation:iphoneX .4s forwards; /* Firefox */
+      -webkit-animation:iphoneX .4s forwards; /* Safari and Chrome */
+      -o-animation:iphoneX .5s forwards; /* Opera */
     }
   }
 
   .tab-bottom-iphoneXS {
     padding: 0 0 25px 0;
     .van-tabbar-item {
-      margin-top: -5px;
+      animation:iphoneX .4s forwards;
+      -moz-animation:iphoneX .4s forwards; /* Firefox */
+      -webkit-animation:iphoneX .4s forwards; /* Safari and Chrome */
+      -o-animation:iphoneX .4s forwards; /* Opera */
     }
   }
 
@@ -522,7 +533,7 @@
   .van-nav-bar {
     background: #ffffffcc;
     position: relative;
-    box-shadow: 4px 0px 2px rgba(0,0,0,0.5);
+    box-shadow: 4px 0 2px rgba(0,0,0,0.5);
   }
   .van-nav-bar::after{
     background: inherit;
diff --git a/src/views/test/360demo.html b/src/views/test/360demo.html
index 5a4ba2c..792d2e1 100644
--- a/src/views/test/360demo.html
+++ b/src/views/test/360demo.html
@@ -155,11 +155,11 @@
     <div class="cube-a" style="top: -60%;"></div>
     <div class="cube-b" style="top: -60%;"></div><!----></div>
 
-    <!--<div data-v-93100324="" class="done">-->
-      <!--<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">-->
-        <!--<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>-->
-      <!--</svg>-->
-    <!--</div>-->
+    <div data-v-93100324="" class="done">
+      <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
+        <path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>
+      </svg>
+    </div>
 </div>
 
 <div class="box">
diff --git a/src/views/test/js点击触发动画.html b/src/views/test/js点击触发动画.html
new file mode 100644
index 0000000..84c102c
--- /dev/null
+++ b/src/views/test/js点击触发动画.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    #aaa {
+      width: 100px;
+      height: 100px;
+      background: blue;
+      transition: all 2s;
+      -moz-transition: all 2s; /* Firefox 4 */
+      -webkit-transition: all 2s; /* Safari and Chrome */
+      -o-transition: all 2s; /* Opera */
+    }
+  </style>
+  <script>
+    function big() {
+      document.getElementById("aaa").style.width = "300px";
+      document.getElementById("aaa").style.height = "300px";
+    }
+    function small() {
+      document.getElementById("aaa").style.width = "100px";
+      document.getElementById("aaa").style.height = "100px";
+    }
+  </script>
+</head>
+<body>
+<button onclick="big()">Big</button>
+<button onclick="small()">Small</button>
+<div id="aaa"></div>
+</body>
+</html>
diff --git a/src/views/test/悬浮小球不旋转.html b/src/views/test/悬浮小球不旋转.html
new file mode 100644
index 0000000..a0c542b
--- /dev/null
+++ b/src/views/test/悬浮小球不旋转.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>悬浮小球不旋转</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    /*#drag-ball {*/
+      /*width: 100px;*/
+      /*height: 100px;*/
+      /*position: fixed;*/
+      /*cursor: pointer;*/
+      /*box-sizing: border-box;*/
+      /*border-radius: 50%;*/
+      /*background-size: 100% 100%;*/
+      /*overflow: hidden;*/
+    /*}*/
+
+    .process-area {
+      width: 100px;
+      height: 100px;
+      cursor: pointer;
+      background: #eee;
+      margin: auto;
+      overflow: hidden;
+      background-size: 100% 100%;
+      border-radius: 50%;
+      position: fixed;
+      transition: .5s;
+    }
+    .process-anime {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border: 4px solid #fff;
+      transform: translate(-50%,-50%);
+      width: 90px;
+      height: 90px;
+      background: linear-gradient(45deg,#fde47c,#fdeca6);
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .process-anime .cube-a {
+      position: absolute;
+      left: 50%;
+      background: rgba(53,53,53,.3);
+      width: 130px;
+      height: 130px;
+      border-radius: 50px;
+      animation: fx-rotate 15s infinite linear;
+      transform-origin: 50% 50%;
+      transition: .5s;
+    }
+    .process-anime .cube-b {
+      position: absolute;
+      left: 50%;
+      background: #fff;
+      width: 130px;
+      height: 130px;
+      border-radius: 50px;
+      animation: fx-rotate 10s infinite reverse linear;
+      transform-origin: 50% 50%;
+      transition: .5s;
+    }
+
+    @keyframes fx-rotate {
+      0% {
+        transform: translate(-50%) rotate(0);
+      }
+      100% {
+        transform: translate(-50%,2px) rotate(365deg);
+      }
+    }
+  </style>
+
+</head>
+<body>
+
+<!--<div id="drag-ball"></div>-->
+
+<div class="process-area" id="drag-ball">
+  <div class="process-anime">
+    <div class="cube-a" style="top: -70%;"></div>
+    <div class="cube-b" style="top: -70%;"></div><!----></div>
+
+  <!--<div data-v-93100324="" class="done">-->
+  <!--<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">-->
+  <!--<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>-->
+  <!--</svg>-->
+  <!--</div>-->
+</div>
+
+<script>
+
+  // 自动吸附距离
+  var marginOffset = 100;
+
+  var ball = document.querySelector('#drag-ball');
+  var ballWidth = ball.offsetWidth;
+  var ballHeight = ball.offsetHeight;
+  var cuntWidth = 0;
+  var cuntHeight = 0;
+  // ball.style.left = parseInt(Math.random() * (document.body.offsetWidth - ballWidth)) + 'px';
+  // ball.style.top = parseInt(Math.random() * (document.body.offsetHeight - ballHeight)) + 'px';
+
+  function move(obj, w, h) {
+    if (obj.direction === 'left') {
+      obj.style.left = 0 - w + 'px';
+    } else if (obj.direction === 'right') {
+      obj.style.left = document.body.offsetWidth - ballWidth + w + 'px';
+    }
+    if (obj.direction === 'top') {
+      obj.style.top = 0 - h + 'px';
+    } else if (obj.direction === 'bottom') {
+      obj.style.top = document.body.offsetHeight - ballHeight + h + 'px';
+    }
+  }
+
+  function rate(obj, a) {
+    obj.style.transform = ' rotate(' + a + ')'
+  }
+
+  function action(obj) {
+
+    var dir = obj.direction;
+
+    switch (dir) {
+      case 'left':
+        rate(obj, '90deg');
+        break;
+      case 'right':
+        rate(obj, '-90deg');
+        break;
+      case 'top':
+        rate(obj, '-180deg');
+        break;
+      default:
+        rate(obj, '-0');
+        break;
+    }
+
+  }
+
+  function ballMove(ballDynamicLeft,ballDynamicTop) {
+    cuntWidth = 0;
+    cuntHeight = 0;
+    ball.direction = '';
+    ball.style.transition = '';
+    ball.style.left = ballDynamicLeft + 'px';
+    ball.style.top = ballDynamicTop + 'px';
+    if (ballDynamicLeft < marginOffset) {
+      ball.direction = 'left';
+      if (ballDynamicLeft < 1) {
+        move(ball, 0, 0);
+      }
+    }
+    if (ballDynamicTop < marginOffset) {
+      ball.direction = 'top';
+      if (ballDynamicTop < 1) {
+        move(ball, 0, 0);
+      }
+    }
+    if (ballDynamicLeft > document.body.offsetWidth - ballWidth - marginOffset) {
+      ball.direction = 'right';
+      if (ballDynamicLeft > document.body.offsetWidth - ballWidth - 1) {
+        move(ball, 0, 0);
+      }
+    }
+    if (ballDynamicTop > document.body.offsetHeight - ballHeight - marginOffset) {
+      ball.direction = 'bottom';
+      if (ballDynamicTop > document.body.offsetHeight - ballHeight - 1) {
+        move(ball, 0, 0);
+      }
+    }
+  }
+
+  /***
+   * 移动端
+   */
+  ball.addEventListener('touchstart', function (e) {
+    var ballLeft = e.touches[0].clientX - ball.offsetLeft;
+    var ballTop = e.touches[0].clientY - ball.offsetTop;
+    move(this, 0, 0);
+    rate(this, 0)
+    document.addEventListener('touchmove', function (e) {
+      var ballDynamicLeft = e.touches[0].clientX - ballLeft
+      var ballDynamicTop = e.touches[0].clientY - ballTop
+      ballMove(ballDynamicLeft,ballDynamicTop)
+    })
+  })
+
+  ball.addEventListener('touchend', function () {
+    this.style.transition = '.5s';
+    move(this, ballWidth / 2, ballHeight / 2);
+    action(this);
+  })
+
+
+  /***
+   * pc端
+   */
+  ball.onmousedown = function (e) {
+    console.log('onmousedown')
+    var ballLeft = e.clientX - ball.offsetLeft;
+    var ballTop = e.clientY - ball.offsetTop;
+    document.onmousemove = function (e) {
+      console.log('onmousemove')
+      cuntWidth = 0;
+      cuntHeight = 0;
+      var ballDynamicLeft = e.clientX - ballLeft
+      var ballDynamicTop = e.clientY - ballTop
+      ballMove(ballDynamicLeft,ballDynamicTop)
+    }
+  }
+
+  ball.onclick = function() {
+    console.log('click')
+  }
+
+  ball.onmouseover = function () {
+    console.log('onmouseover')
+    move(this, 0, 0);
+    rate(this, 0)
+  }
+
+  ball.onmouseout = function () {
+    console.log('onmouseout')
+    move(this, ballWidth / 2, ballHeight / 2);
+    // action(this);
+  }
+
+  ball.onmouseup = function () {
+    console.log('onmouseup')
+    document.onmousemove = null;
+    this.style.transition = '.5s';
+    move(this, ballWidth / 2, ballHeight / 2);
+    // action(this);
+  }
+
+  window.onresize = function () {
+    var bodyH = document.body.offsetHeight;
+    var ballTop = ball.offsetTop;
+    var bodyW = document.body.offsetWidth;
+    var ballLeft = ball.offsetLeft;
+
+    if (ballTop + ballHeight > bodyH) {
+      ball.style.top = bodyH - ballHeight + 'px';
+      cuntHeight++;
+    }
+    if (bodyH > ballTop && cuntHeight > 0) {
+      ball.style.top = bodyH - ballHeight + 'px';
+    }
+    if (ballLeft + ballWidth > bodyW) {
+      ball.style.left = bodyW - ballWidth + 'px';
+      cuntWidth++;
+    }
+    if (bodyW > ballLeft && cuntWidth > 0) {
+      ball.style.left = bodyW - ballWidth + 'px';
+    }
+    move(ball, ballWidth / 2, ballHeight / 2);
+  }
+
+
+
+</script>
+</body>
+</html>