<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>javascript多个圆点弧线运动效果</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%;text-align:center;line-height:300px;color:#000;font-size:20px;}
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 R=oBox.offsetWidth/2; var timer=null; var n=10; for(var i=0;i<n;i++){ var oSpan=document.createElement("span"); oBox.appendChild(oSpan); } var aS=oBox.children var off=true; oBox.onclick=function(){ if(off){ for(var i=0;i<aS.length;i++){ move(aS[i],360/n*i); } }else{ for(var i=0;i<aS.length;i++){ move(aS[i],0); } } off=!off; } function move(obj,iTarget){ var cont=Math.floor(700/30); var start=obj.a||0; var dis=iTarget-start; var m=0; clearInterval(obj.timer); obj.timer=setInterval(function(){ m++; var b=1-m/cont; var cur=start+dis*(1-Math.pow(b,3)); obj.a=cur; var x=R+Math.sin(d2a(cur))*R; var y=R-Math.cos(d2a(cur))*R; obj.style.left=x+"px"; obj.style.top=y+"px"; if(m==cont){ clearInterval(obj.timer) } },30) } } </script></head>
<body>
<div id="box">
点击
</div>
</body>
</html>
前端菜鸟分享：javascript多个圆点弧线运动效果
