<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js 小球运动效果</title>
</head>
<style>
*{padding: 0;margin: 0;}
.ball{
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 10px;
}
.ball1{background: red;}
.ball2{background: yellow;}
.ball3{background: green;}
</style>
<body>
<div class="ball ball1"style="margin-left: 10px;"></div>
<div class="ball ball2" style="margin-left: 10px;"></div>
<div class="ball ball3"style="margin-left: 10px;"></div>
</body>
<script>
window.onload = function(){
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
function animate1(ball,distance,cb){
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft); //转换为数字
if(marginLeft == distance){
cb&&cb();
}else{
if(marginLeft<distance){
marginLeft++;
}else{
marginLeft--;
}
ball.style.marginLeft = marginLeft+'px'; //转回来
animate1(ball,distance,cb);
}
},13);
}
animate1(ball1,800,function(){
animate1(ball2,600,function(){
animate1(ball3,500,function(){
animate1(ball3,300,function(){
animate1(ball2,300,function(){
animate1(ball1,300,function(){
});
});
});
});
});
});
}
</script>
</html>
504
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
