javascript圆点360度旋转效果 前端菜鸟分享：http://www.bird100.cn/ 1. [代码] [JavaScript]代码 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"titlejavascript圆点360度旋转效果/titlestyle*{margin:0; padding:0;}#box{width:300px
前端菜鸟分享：http://www.bird100.cn/
1. [代码][JavaScript]代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript圆点360度旋转效果</title>
<style>
*{margin:0; padding:0;}
#box{width:300px; height:300px; border:1px solid #000; margin:100px auto; position:relative; top:0; left:0; border-radius:50%;}
#box span{ position:absolute; top:0; left:50%; margin-left:-25px; margin-top:-25px; width:50px; height:50px; background:red; border-radius:50%; }
</style>
<script>
function d2a(n){
return n*Math.PI/180;
}
window.onload=function(){
var oBox=document.getElementById("box");
var oS=oBox.children[0];
var R=oBox.offsetWidth/2;
var a=0;
var timer=null;
timer=setInterval(function(){
a++;
var x=R+Math.sin(d2a(a))*R;
var y=R-Math.cos(d2a(a))*R;
oS.style.left=x+"px";
oS.style.top=y+"px";
if(a==1080){
clearInterval(timer);
}
},30)
}
</script>
</head>
<body>
<div id="box">
<span></span>
</div>
</body>
</html>