就是写一个圆形的DIV，绕一个圆形的大div绕圈的效果，唉，研究了就记下来，下面代码复制下来就能运行，IE9以下的没有圆角效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圆形弧运动</title>
<style>
.rect{border:1px solid;width:300px;height:300px;position:relative;left:200px;top:200px;border-radius:150px;}
.circle{background-color:#999;width:40px;height:40px;border-radius:20px;position:absolute;top:0px;left:0}
</style>
<script>
function test(){
var circle = document.getElementById("circle");
var loop = function(radian,circle){
var cos = Math.cos(radian*Math.PI/180);
var sin = Math.sin(radian*Math.PI/180);
var c = 150;
var a = cos*c - 130;
var b = sin*c - 130;
circle.style.top = -b + "px";
circle.style.left = -a + "px";
setTimeout(function(){
radian+=5;
if(radian>=360){
radian = 0;
}
loop(radian,circle);
},10);
}
loop(0,circle);
}
onload = test;
</script>
</head>
<body>
<div class="rect">
<div class="circle" id="circle"></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圆形弧运动</title>
<style>
.rect{border:1px solid;width:300px;height:300px;position:relative;left:200px;top:200px;border-radius:150px;}
.circle{background-color:#999;width:40px;height:40px;border-radius:20px;position:absolute;top:0px;left:0}
</style>
<script>
function test(){
var circle = document.getElementById("circle");
var loop = function(radian,circle){
var cos = Math.cos(radian*Math.PI/180);
var sin = Math.sin(radian*Math.PI/180);
var c = 150;
var a = cos*c - 130;
var b = sin*c - 130;
circle.style.top = -b + "px";
circle.style.left = -a + "px";
setTimeout(function(){
radian+=5;
if(radian>=360){
radian = 0;
}
loop(radian,circle);
},10);
}
loop(0,circle);
}
onload = test;
</script>
</head>
<body>
<div class="rect">
<div class="circle" id="circle"></div>
</div>
</body>
</html>
<html>
<head>
<style>
#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n = 30;
var r = 100;
var a = true;
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var aDiv = [];
var oDiv = null;
var j = 0;
var i = 0;
for (i = 0; i < n; i++) {
oDiv = document.createElement('div');
aDiv.push(oDiv);
document.body.appendChild(oDiv);
} calcDrg(); function calcDrg() {
for (i = 0; i < n; i++) {
var degress = 360 * i / n + j;
var a = Math.sin(degress * Math.PI / 180) * r;
var b = Math.cos(degress * Math.PI / 180) * r;
aDiv[i].style.left = oDiv1.offsetLeft + b + 'px';
aDiv[i].style.top = oDiv1.offsetTop - a + 'px';
}
} setInterval(function () {
j++;
var s = 0.3;
a ? r -= s : r += s; if (r <= 0 || r >= 100) {
a = !a;
} calcDrg();
}, 10);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>一起分享