js圓形環繞運動程式碼例項

admin發表於2017-04-15
JS

分享一段程式碼例項，它實現了多個圓形環繞運動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章