如何在拐角处移动盒子

Question

我想在拐角处移动框(从左上角水平 角到右上角，然后转到右下角。

function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}

<p><button onclick="myMove()">Click Me</button></p>
<div id="container">
<div id="animate"></div>
</div>

Answer 1

您可以按如下条件top和left距离，使其每次在一个方向上移动，并在行驶的总距离满足位置时停止：

function myMove() {
var elem = document.getElementById("animate");
var left = 0;
var top = 0;
var id = setInterval(frame, 5);
elem.style.left = "0px";
elem.style.top = "0px"
function frame() {
if (left < 350 && top == 0) {
left++;
elem.style.left = left + "px";
} else if (left == 350 && top < 350) {
top++;
elem.style.top = top + "px";
} else if (top == 350 && left > 0) {
left--;
elem.style.left = left + "px";
}
else {
clearInterval(id);
}
}
}

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}

<p><button onclick="myMove()">Click Me</button></p>
<div id="container">
<div id="animate"></div>
</div>

Answer 2

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: relative;
background-color: red;
}
.classname #animate {
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {left:0px; top:0px;}
25%  {left:350px; top:0px;}
50%  {left:350px; top:350px;}
75%  {left:0px; top:350px;}
100% {left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0%   {left:0px; top:0px;}
25%  {left:350px; top:0px;}
50%  {left:350px; top:350px;}
75%  {left:0px; top:350px;}
100% {left:0px; top:0px;}
}

function ani(){
document.getElementById('container').className ='classname';
}

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: relative;
background-color: red;
}
.classname #animate {
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {left:0px; top:0px;}
25%  {left:350px; top:0px;}
50%  {left:350px; top:350px;}
75%  {left:0px; top:350px;}
100% {left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0%   {left:0px; top:0px;}
25%  {left:350px; top:0px;}
50%  {left:350px; top:350px;}
75%  {left:0px; top:350px;}
100% {left:0px; top:0px;}
}

<p><button onclick="ani()">Click Me</button></p> 
<div id ="container">
<div id ="animate"></div>
</div>

您可以使用 CSS 动画，如下所示

#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: relative;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {left:0px; top:0px;}
25%  {left:350px; top:0px;}
50%  {left:350px; top:350px;}
75%  {left:0px; top:350px;}
100% {left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0%   {left:0px; top:0px;}
25%  {left:350px; top:0px;}
50%  {left:350px; top:350px;}
75%  {left:0px; top:350px;}
100% {left:0px; top:0px;}
}

<div id ="container">
<div id ="animate"></div>
</div>