Question

我正在构建一个远离鼠标的按钮，并在窗口周围“包裹”。 jQuery / JavaScript比较新，我把它作为一个学习练习（我在这个页面上受到＃4的启发：http://panjiva.com/jobs/challenges）。

背景：这实际上是我的第二次尝试，可能不是问题最优雅的解决方案。基本上，在第二个版本中，隐藏的“临时”按钮与按钮一起移动，并在按钮开始离开屏幕时出现。（我的第一次尝试只有两个按钮，但我遇到了问题。）

下面是一个嵌套的if / else语句，用于检测按钮的一部分何时移出窗口，如果是，则在正确的位置显示临时按钮以给出“换行”效果。它还检查整个按钮是否已移出屏幕，如果是，则将按钮移动到新坐标（临时按钮已暴露的位置）。

我认为整个if / else语句应该只允许按钮包裹到一侧，即使按钮留在角落也是如此。但是，当离开角落时，它有时会缠绕到2或3个角落。为什么会这样？

我创建了一个包含完整代码的JSFiddle：http://jsfiddle.net/aaronmacy/AVwpU/

非常感谢所有帮助/建议！

// Is any part of the button about to move off the page?

// To the top?
if (edgeTop < 0) {

    // Always wrap to the bottom
    bottom.show();

    // Is the button disappearing?
    if (edgeBottom < 0) {
        // Move the button
        buttonNextY += parseInt(viewportHeight);
        moveAll();
        // Hide everything else
        hideTemps();
    }
    else {
        moveAll();
    }
}
// To the right?
else if (edgeRight > parseInt(viewportWidth)) {

    // Wrap to the left
    left.show();

    // Is the button disappearing?
    if (edgeLeft > parseInt(viewportWidth)) {
        buttonNextX -= parseInt(viewportWidth);
        moveAll();
        hideTemps();
    }
    else {
        moveAll();
    }
}
// To the bottom?
else if (edgeBottom > parseInt(viewportHeight)) {

    // Wrap to the top
    top.show();

    // Is the button disappearing?
    if (edgeTop > parseInt(viewportHeight)) {
        buttonNextY -= parseInt(viewportHeight);
        moveAll();
        hideTemps();
    }
    else {
        moveAll();
    }
}
// To the left?
else if (edgeLeft < 0) {

    // Wrap to the right
    right.show();

    // Is the button disappearing?
    if (edgeRight < 0) {
        buttonNextX += parseInt(viewportWidth);
        moveAll();
        hideTemps();
    }
    else {
        moveAll();
    }
}
// If the button is completely inside the window
else {
    moveAll();
}

Answer 1

我认为他们的要求不清楚“屏幕的另一面”....我会说你的脚本运行正常。他们并没有真正考虑奖金要求，他们只是添加它来看看哪个候选人会付出更多努力....无论如何，在你的按钮之间增加距离，在x轴上增加至少按钮宽度和在y轴上增加按钮高度。 ..并且不要隐藏任何副本。它会自然地包裹，相信我;）

if和elseif语句都会触发

1 个答案: