<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四个小球椭圆运动</title>
<style type="text/css">
.ball{border-radius:50%;}
.bg{margin:80px;width:550px;height:200px;border:1px solid #ccc;background:greenyellow;}
.box{position: relative;margin:34px;}
</style>
<script>
οnlοad=function(){
var balls = document.getElementsByClassName("ball");
for(var i =0;i<balls.length;i++){
balls[i].deg = i *45;
}
var a = 300,b=100
setInterval(function(){
for(var i =0;i<balls.length;i++){
balls[i].style.left = a *Math.cos(balls[i].deg *Math.PI /180) +a +"px";
balls[i].style.top = b *Math.sin(balls[i].deg *Math.PI/180) +b +"px";
balls[i].deg+=2;
balls[i].style.width = balls[i].style.height = balls[i].offsetTop /5 +30+"px";
}
},20)
}
</script>
</head>
<body>
<div class="box">
<div class="ball" style="position: absolute; background: red; left:600px; top:0; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: blue; left:1200px; top:300px; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: yellow; left:600px; top:600px; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: black; left:0; top:300px; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: orange; left:0; top:300px; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: pink; left:0; top:300px; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: deepskyblue; left:0; top:300px; width: 30px; height: 30px; ">
</div>
<div class="ball" style="position: absolute; background: purple; left:0; top:300px; width: 30px; height: 30px; ">
</div>
</div>
<div class="bg"></div>
</body>
</html>
JS原生之--圆周运动(转转转)
最新推荐文章于 2024-07-25 19:32:28 发布