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

Question

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

这只适用于向左和向下按钮，但它不是使用边距的好方法。有一种方法可以改变相对左\右\上\下的位置而不是边距吗？

(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 属性。

编辑:更改了 switch 的 if 语句

edit2:现在不会越界