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圆形环绕运动代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容