마우스에서 멀리 이동하고 창 주위를 이동하는 버튼을 만듭니다. 비교적 jQuery/JavaScript에 익숙하지 않은 저는 이것을 학습 연습으로 구성했습니다 (이 페이지의 # 4에서 영감을 받았습니다 : http://panjiva.com/jobs/challenges).if 및 elseif 문이 모두 트리거
배경 : 실제로 이것은 내 두 번째 시도이며, 아마도이 문제에 대한 가장 우아한 해결책은 아닙니다. 기본적으로이 두 번째 버전에는 버튼과 나란히 움직이는 숨겨진 "임시"버튼이 있으며 버튼이 화면에서 나올 때 나타납니다. (처음 시도한 버튼은 두 개 뿐이었지만 문제가 발생했습니다.)
다음은 버튼의 일부가 창 밖으로 이동하는 것을 감지하는 중첩 된 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();
}
가끔 moveAll과 hideTemps의 순서가 바뀝니다. 그게 신중한가요? –
@SteveWellens 아니요 - 잘 잡습니다. 나는 그것들을 일관되게 만들었지 만 여전히 1 랩 이상을보고있다. – amacy
if/else 문에서 hideTemp()를 호출하는 곳에 문제가 있다고 생각합니다. 그것을 현재 위치에서 제거하고 각 if/else 문 바로 뒤에 넣으십시오. 그 이유는 때로는 2 개의 else 문이 실행되는 것입니다. 왜냐하면 hideTemp가 두 번째 if/else에 포함되어 있고 매번 버튼을 지우도록 호출되지 않았기 때문입니다 (확실하지 않습니다!) –