运用js实现圆周运动，要注意三点：
1：物体运动的圆心
2：物体运动的半径
3：物体发生运动的速度
第一步：编写一个div 对div进行设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
//对运动对象div进行一些基本的设置
background:red;
height:60px;
width:60px;
position:absolute;
}
</style>
</head>
<body>
<div id = "div1"></div>
</body>
</html>
这里注意的是要将div变为绝对定位，可以后期让它进行移动
第二步：
对div运动的路径进行设置
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var X = 300;//设置圆心
var Y = 300 ;//设置圆心
var r = 100 ; //半径为100
var i = 0 ;
先在script获取到div的id，X 的值将成为div中left的值 ,Y的值将作为div的top值，r为div运动的半径 ，
第三步，设置定时器 ，让div进行移动
setInterval(function(){
i = i + 2 ;
var radian = i *Math.PI /180; //计算角度
var a = Math.sin(radian) *r; //根据三角函数公式计算
var b = Math.cos(radian) *r; //根据三角形函数公式计算
oDiv.style.left = X + a + 'px';
oDiv.style.top = Y - b + 'px';
}30）；
Math.PI为一个math方法 表示角度为180度，设置定时器（setInterval），每过30毫秒使定时器触发一次，var radian = i *Math.PI /180;计算出角度，用来计算下一次div出现的位置。
注意，div不是在一直移动，而是每过30毫秒变化一次位置，只是30毫秒的速度人眼分辨不出来
第四步，在div中运动中不断插入新的div，为新的div设置格式，主要是用来显示运动div的运动路径
var aDivs = document.createElement("div");
aDivs.style.left = oDiv.offsetLeft + "px";
aDivs.style.top = oDiv.offsetTop + "px";
document.body.appendChild(aDivs);
},30)//注 这里的30和上一步30为同一个30
插入新的div的样式
div{
background:red;
height:5px;
width:5px;
position:absolute;//绝对定位
}
运动后的div的路径如图
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
