+ 1

How can you make the red box moves from top-left corner to the top-right corner, then to the right-bottom, then stop?

<!DOCTYPE html> <html> <head> <title>ANIMATION</title> </head> <body> <div id="container" style="width:200px;height:200px;background:green;position:relative;"> <div id="box" style="width:50px;height:50px;background:red;position:absolute;"> </div> </div> <script> //our box element var box = document.getElementById('box'); var pos = 0; var t = setInterval(moveR, 10); function moveR() { if(pos >= 150) { clearInterval(t); } else { pos += 1; box.style.left = pos+'px'; } } </script> <script> var box = document.getElementById('box'); var pos = 0; var t = setInterval(moveB, 10); function moveB() { if(pos >= 150) { clearInterval(t); } else { pos += 1; box.style.top = pos+'px'; } } </script> </body> </html>

animation dom

10th Nov 2016, 9:46 AM

Abdullah Ojiman Al-Qahtani

2 Respuestas

+ 2

use this script function //our box element var box = document.getElementById('box'); var pos = 0; var pos1 = 0; var t =setInterval(moveR, 10); function moveR() { if(pos1>=150) clearInterval(t); if(pos >= 150) { pos1 += 1; box.style.top = pos1+'px'; } else { pos += 1; box.style.left = pos+'px'; } }

10th Nov 2016, 10:26 AM

Aditya kumar pandey