个人中心
gpt4 book ai didi

javascript - 上下左右移动一个矩形

转载 作者：行者123 更新时间：2023-12-05 02:33:00 25 4
gpt4 key购买 nike

我想通过在 JavaScript 上单击一个按钮来使一个矩形在 4 个方向上移动。只有 Right 和 Down 有效，其他两个无效。我试着在互联网上找到它，但到目前为止还没有成功。

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()" />

最佳答案

你的问题出在这段代码上


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
}

当您向左移动时，您尝试向右添加边距，当您向上移动时，您尝试添加边距底部。这是一个错误的概念，你不应该把它想象成像这张图片那样从 4 边插入盒子 enter image description here

当你用 HTML 和 CSS 编写代码时，试着想象在坐标中，0,0(x 和 y)位于浏览器的左上角，要移动它们，你只能将它们移开或靠近0,0，如下图 enter image description here

我建议您使用开发人员工具学习/调试，您可以看到哪里出了问题， enter image description here

所以答案只是将代码更改为 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>

关于javascript - 上下左右移动一个矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71068605/

25 4 0
文章推荐： python - 如何对 Pandas 中的连续记录(例如 "gaps and islands")进行分组？
文章推荐： go struct with generics 实现可比较
文章推荐： 函数的python可选缓存
文章推荐： bash - 在 bash 脚本中运行别名会得到 `: command not found`
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com