<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
width:400px;
height: 400px;
border-radius: 100%;
border: 1px solid skyblue;
position: absolute;
top: 200px;
left: 200px;
}
span{
display: block;
width: 20px;
height: 20px;
background: red;
border-radius: 100%;
position:absolute;
}
</style>
<body>
<div></div>
<span></span>
</body>
<script type="text/javascript">
var div = document.querySelector('div');
var span = document.querySelector('span');
var r = 200;//设置半径
var deg = 0;
//圆心的位置
var point = {
x: div.offsetLeft + div.offsetWidth/2,
y: div.offsetTop + div.offsetHeight/2
}
//小球的位置
span.style.left = point.x + r -span.offsetWidth/2 + 'px';
span.style.top = point.y -span.offsetHeight/2 + 'px';
//设置小球运动的方向
setInterval(function(){
deg +=3;
var X = point.x + r*Math.cos(Math.PI/180*deg);
var Y = point.y - r*Math.sin(Math.PI/180*deg);
span.style.left = X - span.offsetWidth/2 + 'px';
span.style.top = Y - span.offsetHeight/2 + 'px';
},30)
</script>
</html>
网友评论