如何在拐角處移動盒子

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

 #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> 

Answer 2

你可以在條件下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>