修改全局上传器样式
This commit is contained in:
jmal
parent
15bec9e5cc
commit
8816b444ed
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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">
|
||||
|
||||
31
src/views/test/js点击触发动画.html
Normal file
31
src/views/test/js点击触发动画.html
Normal file
@ -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>
|
||||
281
src/views/test/悬浮小球不旋转.html
Normal file
281
src/views/test/悬浮小球不旋转.html
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user