0

我目前正在创建一个简单的交互式简历，主要使用 javascript。这个想法是用户将一个角色向右引导，然后会出现一些“关于我”的div。这些“about-me”-div 应该在角色移动时移动，因此看起来它们越来越接近/越来越远离它们。如果不清楚，请查看演示。

我已经通过将 style.left 设置为 100 来解决这个问题，然后每次角色向右移动时都会从中减去。在示例中，我使用了 minions，而不是“about-me”-div，只是为了让函数正常工作。

let moveMinion = 100; // This is the same as their 'left' in CSS.
let moveMinionTwo = 150;

if (keyPresses.ArrowRight) {
        moveMinion -= 0.3;
        moveMinionTwo -= 0.3;
        
        minionOne.style.left = moveMinion + '%'; // I Used % because I want it to work on different screen widths.
        minioneTwo.style.left = moveMinionTwo + '%'; }

但是，我希望“关于我”的 div 能够“重复”并在角色走了一段时间后再次回来。像这个例子。

我尝试在下面使用此代码，在与 c 相同的函数中，但没有任何反应，除了当 style.left 为 -10% 时，minion 似乎快速闪烁。

if (minionOne.style.left <= -10 + '%') minionOne.style.left = moveMinion + '%';

TLDR：当 style.left 达到特定数字时，我希望 style.left 更改为其他内容。

请记住，这还没有完成，因此您不必在我需要帮助的那个之外判断代码和项目，除非您想提供任何提示。

github上的回购

我的演示

4

1 回答 1

0

你不能<=串。您必须将一个转换为数字并与数字进行比较。

const threshold = -10;
const asNum = Number(minionOne.style.left.split('%')[0]);
if (asNum <= threshold ) {
  minionOne.style.left = `${100 + asNum - threshold}%`;
}
于 2021-11-26T14:04:10.167 回答