我正在构建一个远离鼠标并“环绕”窗口的按钮。对于 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();
}