マウスから離れてウィンドウを「ラップ」するボタンを作成しています。jQuery/JavaScript は比較的新しいので、これを学習演習として作成しています (このページの #4 に触発されました: http://panjiva.com/jobs/challenges )。
背景: これは実際には私の 2 回目の試みであり、おそらく問題に対する最も洗練された解決策ではありません。基本的に、この 2 番目のバージョンでは、ボタンと連携して移動し、ボタンが画面から離れ始めると表示される非表示の「一時」ボタンがあります。(私の最初の試行にはボタンが 2 つしかありませんでしたが、そこで問題が発生しました。)
以下は、ネストされた if/else ステートメントで、ボタンの一部がウィンドウの外に移動したことを検出し、移動している場合は、正しい場所に一時ボタンを表示して「ラップ」効果を与えます。また、ボタン全体が画面外に移動したかどうかも確認し、移動した場合は、ボタンを新しい座標 (temp ボタンが表示されていた場所) に移動します。
ボタンが隅に残っている場合でも、この 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();
}