圆周运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#ball {
width: 30px;
height: 30px;
background: salmon;
position: absolute;
left: 400px;
top: 100px;
border-radius: 50%;
}
</style>
<body>
<p id="ball"></p>
</body>
</html>
<script type="text/javascript">
/* 圆周运动 */
//思路
//1.找到圆心，以圆心建立坐标原点；
//2.小球的left和top的坐标点随着角度变化绕圆心进行圆运动；
var ball = document.getelementbyid("ball");
var r = 200;
/* 小球起始角度为90° */
var deg = 90;
/* 圆心坐标 */
var centerPoint = {
x: ball.offsetleft + ball.offsetwidth / 2,
y: r + ball.offsettop
}
/* 小球转到中间某点的坐标，利用三角函数进行计算*/
setInterval(function () {
ball.style.left = centerPoint.x + Math.cos(deg * Math.PI / 180) * r + "px";
ball.style.top = centerPoint.y - Math.sin(deg * Math.PI / 180) * r + "px";
deg -= 2;
}, 10);
</script>
文章最后发布于: 2018-10-23 20:42:06