커서가 어디에서 왔는지에 따라 요소를 처리하는 방법

Question

질문이 명확하기를 바라며이 요소를 가리키면 커서가있는 위치를 기준으로 요소에 "모든 것"을 수행하고 싶습니다. 예를 들어, 커서가 왼쪽에서 오는 경우 요소를 오른쪽으로, 커서가 오른쪽에서 오는 경우 왼쪽으로, 위쪽에서 오는 경우 커서를 맨 아래로, 맨 아래로 오는 경우 요소 위로 이동합니다. 나는 혼자서 그것을 시도했다, 그것은 잘되지 않았다. 그래서 나 자신의 무엇이라도 보여줄 것을 기대하지 마라, 유감스럽게 생각해 라. 그러나 나는 당신을 위해 예를 가지고 : http://pixelentity.com/

그래서, 어떻게 나에게 방법을 알려주세요 그 jQuery를 및/또는 CSS3

Answer 1

마우스가 움직이는 방향을 블록 입구로 가져올 수 있습니다. 이 예에서 마우스 방향이 코드 jsfiddle에서 표현의 상단에 변수에서 따라 그 모양 얻을 http://jsfiddle.net/PNsd5/2/

기능을 봐 :

function getMoveDir(){ 
    var direction = ''; 
    if ((disX <= 0) && (disY <= 0)){ 
     if (disX < disY) { 
      direction = 'From right'; 
     } else { 
      direction = 'From top'; 
     } 
    } 
    if ((disX >= 0) && (disY >= 0)) { 
     if (disY > disX) { 
      direction = 'from bottom'; 
     } else { 
      direction = 'from left' 
     } 
    } 
    return direction; 
} 

Answer 2

사용 JQuery와 mouseenter 이벤트를 사용.

현재 표시된 코드는 마우스 위치에 따라 다른 애니메이션을 작성한 다음 오프셋을 계산합니다. 따라서 마우스 센터의 위치를 ​​계산 한 다음 커서가 어디에서 왔는지를 결정할 수 있습니다.

그럼 어쨌든 그림을 애니메이션으로 지정할 수 있습니다. 여기

도우미 기능 mouseenter, 이 오프셋, 애니메이션해야한다. 도움이 더 필요하시면 알려 주시기 바랍니다.