<style type="text/css">
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<p>
<button onclick="myMove()">点我</button>
</p>
<div id="myContainer">
<div id="myAnimation"></div>
</div>
<script>
function myMove(){
var myContainer = document.getElementById('myContainer');
var myAnimation = document.getElementById('myAnimation');
var a = 0;
var id = setInterval(Move,10);
function Move(){
if(a==350){
clearInterval(id);
}else{
a++;
myAnimation.style.top= a + 'px';
myAnimation.style.left = a + 'px';
}
}
}
</script>