lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

悬浮拖动球的示例

Browse Source
This commit is contained in:
jmal 2020-02-20 17:53:30 +08:00
parent b2569db9a5
commit a083a0ab47
3 changed files with 390 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/test/360demo.html Normal file
View File

@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.process-area {
width: 140px;
height: 140px;
background: #eee;
margin: auto;
border-radius: 50%;
position: relative;
transition: .5s;
}
.process-anime {
position: absolute;
top: 50%;
left: 50%;
border: 4px solid #fff;
transform: translate(-50%,-50%);
width: 130px;
height: 130px;
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: 56px;
height: 56px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(2.25);
}
.process-anime .done .checkmark {
width: 56px;
height: 56px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0 0 0 #fdda65;
animation: fill-data-v-93100324 .4s ease-in-out .4s forwards,scale-data-v-93100324 .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-v-93100324 .3s cubic-bezier(.65,0,.45,1) .8s forwards;
}
*{
margin:0;
}
.box{
width: 130px;
height: 130px;
margin: 130px auto;
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
border-radius: 100%;
overflow: hidden;
position: relative;
}
.box:before{
content: '';
width: 130px;
height: 130px;
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
border-radius: 100%;
position: absolute;
left: 10px;
top: 10px;
}
/*.box:after{*/
/*content: '';*/
/*width: 160px;*/
/*height: 160px;*/
/*background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);*/
/*border-radius: 100%;*/
/*position: absolute;*/
/*left: 20px;*/
/*top: 20px;*/
/*}*/
.wave{
margin-top: 0px;
width: 100%;
height: 210px;
position: relative;
overflow: hidden;
z-index: 2;
}
.parallax>use {
animation: wave-move 5s linear infinite;
animation-duration: 1.5s;
}
.parallax>use:nth-child(1) {
animation-delay: -.5s;
}
.parallax>use:nth-child(2) {
animation-delay: -.9s;
}
.parallax>use:nth-child(3) {
animation-delay: -1.5s;
}
@keyframes wave-move {
0% {
transform: translate(90px,0);
}
100% {
transform: translate(-85px,0);
}
}
@keyframes fx-rotate {
0% {
transform: translate(-50%) rotate(0);
}
100% {
transform: translate(-50%,2px) rotate(365deg);
}
}
</style>
</head>
<body>
<div class="process-area">
<div class="process-anime">
<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>
<div class="box">
<svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
<defs>
<path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
</defs>
<g class="parallax">
<use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
<use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
<use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
</g>
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="#FDD936" stop-opacity="0.4" />
<stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
</linearGradient>
</defs>
</svg>
</div>
</body>
</html>

206
src/views/test/test.html Normal file
View File

@ -0,0 +1,206 @@
<!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>js仿360桌面悬浮球拖拽到边缘自动贴边特效</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
#drag-ball {
width: 100px;
height: 100px;
background: #ddd;
position: fixed;
cursor: move;
box-sizing: border-box;
border: 4px solid #66cc66;
border-radius: 50%;
background: url('test.jpeg') no-repeat center center;
background-size: 100% 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="drag-ball"></div>
<script>
// 自动吸附距离
var marginOffset = 50;
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) {
var ballLeft = e.clientX - ball.offsetLeft;
var ballTop = e.clientY - ball.offsetTop;
document.onmousemove = function (e) {
cuntWidth = 0;
cuntHeight = 0;
var ballDynamicLeft = e.clientX - ballLeft
var ballDynamicTop = e.clientY - ballTop
ballMove(ballDynamicLeft,ballDynamicTop)
}
}
ball.onmouseover = function () {
move(this, 0, 0);
rate(this, 0)
}
ball.onmouseout = function () {
move(this, ballWidth / 2, ballHeight / 2);
action(this);
}
ball.onmouseup = function () {
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>

BIN
src/views/test/test.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB