极客观点
项目管理
HarmonyOS
问题：怎么实现点击div移动到某个位置，再点击时回到原来的位置？哪位好心人可以提示一下怎么更优雅地实现这个效果，感觉我写的方法有点乱。非常感谢！
效果图：
<!DOCTYPE html>
<html>
<head>
<title>圈圈运动</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<div class="wrap-box">
<div class="bg">
</div>
<div id="one" class="circular one">
</div>
<div id="two" class="circular two">
</div>
<div id="three" class="circular three">
</div>
<div id="four" class="circular four">
</div>
<div id="five" class="circular five">
</div>
<div id="six" class="circular six">
</div>
<div id="seven" class="circular seven">
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/circle.js"></script>
</body>
</html>
//css代码
* {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
height: 1000px;
position: relative;
}
.wrap-box {
width: 50%;
margin: 0 auto;
}
.bg {
width: 40%;
height: 800px;
margin: 20px auto 0 auto;
position: absolute;
z-index: 99;
display: none;
background-color:#CFCFCF;
}
.circular {
position: absolute;
width: 150px;
height: 150px;
background-color: #DEDEDE;
border-radius: 100%;
}
.circular:hover {
background-color: #FF3030;
}
.one {
left: 41%;
top: 7%;
}
.two {
left: 49%;
top: 7%;
}
.three {
left: 37%;
top: 20%;
}
.four {
left: 45%;
top: 20%;
}
.five {
left: 53%;
top: 20%;
}
.six {
left: 41%;
top: 33%;
}
.seven {
left: 49%;
top: 33%;
}
//js代码
$(document).ready(function() {
$(".circular").on("click",function(e) {
$this = $(this);
$(this).animate({
left: '200px',
top: '0'
});
$bg = $(".bg");
$bg.show('slow');
e.stopPropagation();
});
});
用@keyframes的逐帧动画；就可以；不用js实现。