2012-08-17 2 views
2

마우스에서 멀리 이동하고 창 주위를 이동하는 버튼을 만듭니다. 비교적 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(); 
} 
+0

가끔 moveAll과 hideTemps의 순서가 바뀝니다. 그게 신중한가요? –

+0

@SteveWellens 아니요 - 잘 잡습니다. 나는 그것들을 일관되게 만들었지 만 여전히 1 랩 이상을보고있다. – amacy

+0

if/else 문에서 hideTemp()를 호출하는 곳에 문제가 있다고 생각합니다. 그것을 현재 위치에서 제거하고 각 if/else 문 바로 뒤에 넣으십시오. 그 이유는 때로는 2 개의 else 문이 실행되는 것입니다. 왜냐하면 hideTemp가 두 번째 if/else에 포함되어 있고 매번 버튼을 지우도록 호출되지 않았기 때문입니다 (확실하지 않습니다!) –

답변

1

나는 그들의 요구 사항이 "화면의 다른면"으로 불분명하다고 생각합니다 .... 나는 당신의 스크립트가 잘 동작한다고 말할 것입니다. 그들은 실제로 보너스 요구 사항에 대해 생각하지 않았고, 어떤 후보자가 더 많은 노력을 기울일 지 알기 위해 추가했습니다. 어쨌든, 버튼 사이의 거리를 더 늘리고, 적어도 버튼 폭을 x에, 버튼 높이를 y 축에 추가하십시오. .. 그리고 어떤 사본도 숨기지 마라. 자연스럽게 랩됩니다.)