js围绕圆旋转

.box{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 50%;
    margin:100px auto;
    position: relative;
}
<div class="box"></div>
<button>开始</button>
    <script>
    var box=document.querySelector('.box');
    var btn=document.querySelector('button');
    btn.onclick=function(){
        var ship=document.createElement('div');
            ship.className+="ship orbit-1";
            box.appendChild(ship)
    </script>

点击按钮动态添加元素，怎么让这个添加的元素围绕.box旋转。。我要怎么改变添加元素的left和top才能让他围绕<div class="box"></div>这个圆运动？？？

你是要这样么？

.box{
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 200px auto;
    position: relative;
}

.ship {
    background-color: red;
    
    position: absolute;
    left: 288px;
    top: 215px;
    width: 20px;
    height: 20px;
    border-radius: 50%;

    animation: myOrbit 4s linear infinite;
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

var box=document.querySelector('.box');
var btn=document.querySelector('button');

btn.addEventListener('click', function(){
  var ship = document.querySelector('.ship');
  if(!ship){
      var div=document.createElement('div');
      div.classList.add('ship');
      return document.body.appendChild(div);
  }
  document.body.removeChild(ship);
}, false);

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box"></div>
    <button>触发</button>
    <script src="script.js"></script>
  </body>
</html>

你也看这里的在线demo：plunker

可以用css3写动画，然后动态添加这个class。

其实利用以前学过的三角函数的知识就可以解这道题

效果预览

html

<div class="box-wrap">
  <div class="box">click me</div>
  <div class="box">click me</div>
  <div class="box">click me</div>
</div>

css

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.box-wrap{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}

.box{
  width: 100px;
  height: 100px;
  background-color: #009a61;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  color: #fff;
  cursor: pointer;
}

.round{
  border-radius: 50%;
  position: absolute;
  background-color: #009a61;
}

js

var app = {
  init: function () {
    this.move();
  },
  cEle: function (tagName, iClass) {
    var tag = document.createElement(tagName);

    tag.className = iClass ? iClass : '';

    return tag;
  },
  css: function (ele, styles) {
    for(var attr in styles){
      ele['style'][attr] = styles[attr];
    }
  },
  round: function (ele, x, y, r) {
    var deg = 0;
    var timer = null;
    var _this = this;
    var w = ele.offsetWidth;
    var h = ele.offsetHeight;
    var a,b;

    clearInterval(timer);
    timer = setInterval(function () {
      deg += 2;
      a = Math.sin(deg * Math.PI/180) * r;
      b = Math.cos(deg * Math.PI/180) * r;

      _this.css(ele, {
        left: (x - w/2) + b + 'px',
        top: (y - h/2) + a + 'px'
      })
    }, 30);
  },
  move: function () {
    var aBox = document.querySelectorAll('.box');
    var _this = this;
    var body = document.body;
    var left,top,r,ele,w;

    [].slice.call(aBox).forEach(function (e) {
      e.addEventListener('click', function () {
        ele = _this.cEle('div', 'round');
        w = Math.floor(Math.random() * 50 + 10);
        left = this.offsetLeft + this.offsetWidth/2;
        top = this.offsetTop + this.offsetHeight/2;
        r = this.offsetWidth + Math.floor(Math.random() * 50);

        _this.css(ele, {
          width: w + 'px',
          height: w + 'px'
        })

        body.appendChild(ele);
        _this.round(ele, left, top, r);
      }, false)
    })
  }
}

app.init();

【热门文章】