圆，主要看算法
2016-12-08 本文已影响0人
编程师小刘
<style>
#box{ width:300px; height:300px; border-radius:50%; border:1px solid #6cf; position:relative; top:100px; left:100px; }
span{ position:absolute; left:50%; top:0; width:30px; height:30px; background:#399; border-radius:50%; margin:-15px 0 0 -15px; }
</style>
<script>
function d2a(n){ //角转弧
return n*Math.PI/180;
}
function a2d(n){ //弧转角
return n*180/Math.PI;
}
window.onload=function (){
var oBox=document.getElementById('box');
var oS=document.getElementById('s');
var R=oBox.offsetWidth/2;
var N=10;
for(var i=0; i<N; i++){
var oS=document.createElement('span');
oBox.appendChild(oS);
}
var aS=oBox.children;
var bOk=true;
oBox.onclick=function (){
if(bOk){
for(var i=0; i<aS.length; i++){
startMove(aS[i],i*360/N);
}
}else{
for(var i=0; i<aS.length; i++){
startMove(aS[i],0);
}
}
bOk=!bOk;
};
function startMove(obj,iTarget){
var start=obj.a||0;
var dis=iTarget-start;
var count=Math.floor(1000/16);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function (){
n++;
var a=n/count;
var cur=start+dis*(Math.pow(a,3));
var x=R+Math.sin(d2a(cur))*R;
var y=R-Math.cos(d2a(cur))*R;
obj.a=cur;
obj.style.left=x+'px';
obj.style.top=y+'px';
if(n==count){
clearInterval(obj.timer);
}
},16);
}
};
</script>
</head>
<body>
<div id="box"></div>
</body>
