问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js围绕圆旋转

头像
muzi1102
    51675878
    .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>这个圆运动？？？

    javascript
    阅读 7.9k
    3 个回答
    得票最新
    头像
    leftstick
      27.3k33329
      ✓ 已被采纳

      你是要这样么？

      .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

      头像
      爱小苹果的小任
        2225

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

        头像
        前端胖头鱼
          3.7k22836

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

          效果预览

          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();
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题