单击向上\\向下\\向左\\向右按钮时如何在div中移动圆圈

Question

我需要通过单击按钮来移动圆圈。 并且圆圈不应远离边界。

这只是向左和向下按钮，但它不是一个使用边距的好方法。 有一种方法可以改变位置相对left \\ right \\ top \\ down而不是边距？

 (function(){ var button = document.getElementsByClassName("button"); var circle = document.getElementById("circle"); var down=0, up=0, left=0, right=0; for (var i = 0; i < button.length; i++) { button[i].addEventListener('click',function(e){ var position = e.currentTarget.value; if(position==="down"){ down+=5; circle.style.marginTop = down +"px"; } if(position==="up"){ up+=5; circle.style.marginBottom = up+'px'; } if(position==="left"){ left+=5; circle.style.marginRight = left+'px'; } if(position==="right"){ right+=5; circle.style.marginLeft = right+'px'; } } ) } }()); 

 html, body { font-size: 62.5%; } .border{ position: relative; overflow: hidden; float: left; width: 70% ; height: 50rem; border: 1rem black solid; margin-right: 1rem; } .sidebar{ position: relative; float: left; border: 1rem black solid; width: 25% ; height: 50rem; } .buttons{ position: relative; width: 25rem; height: 21rem; top: 9rem; left: 4rem; } .button{ position: absolute; width: 7rem; height: 7rem; } .arrow{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .arrow-up{ border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 16px solid black; } .arrow-right{ border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 16px solid black; } .arrow-left{ border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right:16px solid black; } .arrow-down{ border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid black; } .down{ bottom: 0; left: 9rem; } .left{ top: 7rem; left: 0; } .right{ top: 7rem; right: 0; } .up{ top: 0; left: 9rem; } .reset{ position: relative; top: 12rem; width: 10rem; height: 4rem; left: 12rem; } #circle{ position: relative; border-radius: 50%; width: 150px; height: 150px; background:blue; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

 <div class="border"> <div id="circle"></div> </div> <div class="sidebar"> <div class="buttons"> <button class="button up" value="up"><span class="arrow-up arrow"></span></button> <button class="button down" value="down"><span class="arrow-down arrow"></span></button> <button class="button right" value="right"><span class="arrow-right arrow"></span></button> <button class="button left" value="left"><span class="arrow-left arrow"></span></button> </div> <button class="reset">Reset</button> </div> 

Answer 1

您必须对您的JavaScript代码进行少量更改：

    (function(){

    var button = document.getElementsByClassName("button");
    var circle = document.getElementById("circle");

    var top=50, left=50, perStep = 2;

    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click',function(e){

            var position = e.currentTarget.value;

            switch(position){
                case "up": top-=perStep; break;
                case "down": top+=perStep; break;
                case "left": left-=perStep; break;
                case "right": left+=perStep; break;
            }

            if(top < 0)
                top = 0;
            if(top > 100)
                top = 100;

            if(left < 0)
                left = 0;
            if(left > 100)
                left = 100;

            circle.style.top = top+'%';
            circle.style.left = left+'%';
        });
    }

}());

您可以更好地更改顶部和左侧css属性，而不是更改边距。

编辑：更改if语句切换

edit2：现在不走出边界

Answer 2

JS小提琴

JS：

(function() {
  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");
  var down = 0,
    up = 0,
    left = 0,
    right = 0;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;

      // for bottom and top, use marginTop, but for one increase by 5
      // and for the other decrease by 5
      if (position === "down") {
        down += 5;
        circle.style.marginTop = down + "px";
      }
      if (position == "up") {
        up -= 5;
        circle.style.marginTop = up + 'px';
      }
      // same thing for left and right, use marginLeft, but for one increase by 5
      // and for the other decrease by 5
      if (position == "left") {
        left -= 5;
        circle.style.marginLeft = left + 'px';
      }
      if (position == "right") {
        left += 5;
        circle.style.marginLeft = left + 'px';
      }
    })
  }
}());

---

UPDATE

或者你可以移动top和left值而不是marginTop和marginLeft如下所示：

JS小提琴2

(function() {

  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");


  var posTop = circle.offsetTop,
    posLeft = circle.offsetLeft;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;
      if (position === "down") {
        posTop += 5;
        circle.style.top = posTop + "px";
      }
      if (position == "up") {
        posTop -= 5;
        circle.style.top = posTop + 'px';
      }
      if (position == "left") {
        posLeft -= 5;
        circle.style.left = posLeft + 'px';
      }
      if (position == "right") {
        posLeft += 5;
        circle.style.left = posLeft + 'px';
      }

    })
  }
}());