使用Javascript动态移动元素位置

Question

让我知道这是否有效。是的 print(foo) python 函数

Answer 1

移动一次后必须重新计算

x

和

y

的值。 因为当您第二次移动块时，您只是使用在

x

循环开始之前计算的

y

和

for

的原始值。

将此添加到您的

forEach()

方法中。

 x = myBlock.offsetLeft;
 y = myBlock.offsetTop; 

您后来在评论中提到了每次移动之间有延迟。 您可以通过创建另一个动画块函数、在循环内设置超时并在超时内调用该动画块函数来实现此目的。

const animateBlock = (key)=> {
    let x = myBlock.offsetLeft;
    let y = myBlock.offsetTop;

    if (key === 'ArrowRight') {
      myBlock.style.left = `${x + 50}px`
    } else if (key === 'ArrowLeft') {
      myBlock.style.left = `${x - 50}px`
    } else if (key === 'ArrowDown') {
      myBlock.style.top = `${y + 50}px`
    } else if (key === 'ArrowUp') {
      myBlock.style.top = `${y - 50}px`
    }
}


const moveBlock = () => { 
  keyArray.forEach((key, i) => {
     setTimeout(() => {
       animateBlock(key);
     }, i * 1000);
  })
}

工作演示：https://codepen.io/nikhilmopidevi/pen/gOYjgYd