js圆形环绕运动代码实例
分类：实例代码
分享一段代码实例，它实现了多个圆形环绕运动效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</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>
js圆形环绕运动代码实例，这样的场景在实际项目中还是用的比较多的，关于js圆形环绕运动代码实例就介绍到这了。
js圆形环绕运动代码实例属于前端实例代码，有关更多实例代码大家可以查看。