<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆周运动</title>
<style>
body {
background:#16171B;
}
#demo {
width:100px;
height:100px;
border-radius:100px;
border:3px solid #D6D8ED;
margin:50px auto;
box-shadow:inset 10px 10px 10px #0B090C, inset -10px -10px 10px #0B090C, 3px 0px 60px rgba(74, 94, 157, .8), 0px -5px 60px rgba(74, 94, 157, .8);
position:absolute;
top:300px;
left:500px;
background-color: #999;
}
</style>
</head>
<body>
<div id="demo"> </div>
<script type="text/javascript">
function circle(id, R, speed, time) {
speed = speed || 10;
time = time;
var x = document.getElementById(id).offsetLeft;
var y = document.getElementById(id).offsetTop;
var step = 1;
var r = 1;
var timer = setInterval(function() {
r = r + 1;
if (r > R) {
r -= 1;
}
if (step == 360) {
step = 1;
}
if (time != undefined) {
setTimeout(function() {
clearInterval(timer);
}, time);
}
document.getElementById(id).style.left = x + r * Math.sin(step) + "px";
document.getElementById(id).style.top = y + r * Math.cos(step) + "px";
step -= speed / 100;
}, 1);
}
circle("demo", 300, 1);
</script>
</body>
</html>