logo标签列表

将一个矩形向上、向下、向左、向右移动。

javascripthtmlcss
3

我希望通过JavaScript实现矩形的四个方向移动，只需点击一个按钮即可。但目前只有向右和向下移动可以正常工作，而其他两个方向无法正常工作。我在网上尝试寻找解决方法，但目前还没有成功。

var currentXpos = 0;

function moveRectRight() {
  var rect = document.getElementById('rectangle');
  currentXpos += 100; // move by 100 px to the right
  rect.style.marginLeft = currentXpos + 'px'; // re-draw rectangle
}

function moveRectLeft() {
  var rect = document.getElementById('rectangle');
  currentXpos += 100; // move by 100 px to the right
  rect.style.marginRight = currentXpos + 'px'; // re-draw rectangle
}

function moveRectUp() {
  var rect = document.getElementById('rectangle');
  currentXpos += 100; // move by 100 px to the right
  rect.style.marginBottom = currentXpos + 'px'; // re-draw rectangle
}

function moveRectDown() {
  var rect = document.getElementById('rectangle');
  currentXpos += 100; // move by 100 px to the right
  rect.style.marginTop = currentXpos + 'px'; // re-draw rectangle
}
#rectangle {
  background-color: red;
  width: 200px;
  height: 100px;
  margin-left: 0px;
}
<div id='rectangle'></div>
<input type="button" value="Right" onclick="moveRectRight()" />
<input type="button" value="Left" onclick="moveRectLeft()" />
<input type="button" value="Up" onclick="moveRectUp()" />
<input type="button" value="Down" onclick="moveRectDown()" />

当我点击时，矩形会移动。 - Sfili_81
当您点击向右和向下时，它会移动，但向左和向上不会移动。 - Bilguudee Tuvshintulga
为什么不直接使用 position: absolute 和 top、left 呢？ - Heretic Monkey
这个回答解决了你的问题吗？如何使用JavaScript将div从左到右移动 - Heretic Monkey
3个回答
2
您的问题出在这段代码上。

function moveRectLeft() {
 var rect = document.getElementById('rectangle');
 currentXpos += 100; // move by 100 px to the right
 rect.style.marginRight = currentXpos + 'px'; // re-draw rectangle
}

function moveRectUp() {
 var rect = document.getElementById('rectangle');
 currentXpos += 100; // move by 100 px to the right
 rect.style.marginBottom = currentXpos + 'px'; // re-draw rectangle
}

当你向左移动时，你尝试添加右边的边距，当你向上移动时，你添加底部的边距。这是一个错误的概念，你不应该想象成盒子从四个方向被推开，就像这张图片一样。
在编写HTML和CSS时，尝试想象坐标系中的0,0（x和y）位于浏览器的左上角，要移动它们，只能将它们远离或靠近0,0，如下图所示。
我建议您使用开发者工具进行学习/调试，您可以看到哪里出了问题。
因此，答案只是将代码更改为marginLeft和marginTop。
除此之外，我做了自己的版本，也许你想看看。 

<html>

<head>
  <style>
    #rectangle {
      background-color: red;
      width: 200px;
      height: 100px;
      position: fixed;
    }
  </style>
</head>

<body>
  <div id='rectangle' style="top:100px;left:100px;"></div>
  <input type="button" value="Right" onclick="moveRect(this)" />
  <input type="button" value="Left" onclick="moveRect(this)" />
  <input type="button" value="Up" onclick="moveRect(this)" />
  <input type="button" value="Down" onclick="moveRect(this)" />
  <script>
    const distance = 10;
    const directionMap = {
      'Up': {
        'prop': 'top',
        'value': -1
      },
      'Down': {
        'prop': 'top',
        'value': 1
      },
      'Left': {
        'prop': 'left',
        'value': -1
      },
      'Right': {
        'prop': 'left',
        'value': 1
      },
    }

    const parsePosition = (prop) => parseFloat(rectangle.style[prop]) || 0;

    const moveRect = (element) => {
      let {
        prop,
        value
      } = directionMap[element.value];
      rectangle.style[prop] = (parsePosition(prop) + (value * distance)) + "px";
    }
  </script>
</body>

</html>

1

Thremulant提供了一个非常好的解决方案，但是有一些遗漏，即“当前位置”变量应该对X和Y轴分别设置不同的值。这样它就不会显示异常行为。

<html>
<head>
<style>
#rectangle {
  background-color: red;
  width: 200px;
  height: 100px;
  margin-left: 0px;
}
</style>
<script>
var currentXpos = 0;
var currentYpos = 0;

function moveRectRight() {
  var rect = document.getElementById('rectangle');
  currentXpos += 100; // move by 100 px to the right
  rect.style.marginLeft = currentXpos + 'px'; // re-draw rectangle
}

function moveRectLeft() {
  var rect = document.getElementById('rectangle');
  currentXpos -= 100; // move by 100 px to the right
  rect.style.marginLeft = currentXpos + 'px'; // re-draw rectangle
}

function moveRectUp() {
  var rect = document.getElementById('rectangle');
  currentYpos -= 100; // move by 100 px to the right
  rect.style.marginTop = currentYpos + 'px'; // re-draw rectangle
}

function moveRectDown() {
  var rect = document.getElementById('rectangle');
  currentYpos += 100; // move by 100 px to the right
  rect.style.marginTop = currentYpos + 'px'; // re-draw rectangle
}
</script>
</head>
<body>
<div id='rectangle'></div>
<input type="button" value="Right" onclick="moveRectRight()" />
<input type="button" value="Left" onclick="moveRectLeft()" />
<input type="button" value="Up" onclick="moveRectUp()" />
<input type="button" value="Down" onclick="moveRectDown()" />
</body>
</html>
1
因为HTML中的边距取决于是否有邻居。所以，您将看不到margin-right和margin-bottom起作用，因此您将看不到框向上或向左移动。
相反，您可以通过加减影响同一属性。对于Y，只影响margin-top，对于X，只影响margin-left CSS文档 

<html>

<head>
  <style>
    #rectangle {
      background-color: red;
      width: 200px;
      height: 100px;
      margin-left: 0px;
    }
  </style>

</head>

<body>
    <div id='rectangle'>
    </div>
  <input type="button" value="Right" onclick="moveRectRight()" />
  <input type="button" value="Left" onclick="moveRectLeft()" />
  <input type="button" value="Up" onclick="moveRectUp()" />
  <input type="button" value="Down" onclick="moveRectDown()" />
  <script>
    var currentXpos = 0;
    function moveRectRight() {
      var rect = document.getElementById('rectangle');
      console.log(rect)
      currentXpos += 100; // move by 100 px to the right
      rect.style.marginLeft = currentXpos + 'px'; // re-draw rectangle
    }
    function moveRectLeft() {
      var rect = document.getElementById('rectangle');
      currentXpos -= 100; // move by 100 px to the right
      rect.style.marginLeft = currentXpos + 'px'; // re-draw rectangle
    }
    function moveRectUp() {
      var rect = document.getElementById('rectangle');
      currentXpos -= 100; // move by 100 px to the right
      rect.style.marginTop = currentXpos + 'px'; // re-draw rectangle
    }
    function moveRectDown() {
      var rect = document.getElementById('rectangle');
      currentXpos += 100; // move by 100 px to the right
      rect.style.marginTop = currentXpos + 'px'; // re-draw rectangle
    }

  </script>
</body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接