JS는 마우스가 컨테이너 인스턴스에 들어가는 방향을 결정합니다.

우연히 마우스가 컨테이너에 들어가는 방향을 어떻게 결정하는지에 대한 질문이 생각났습니다. 가장 먼저 떠오르는 것은 컨테이너의 네 면에 몇 개의 블록을 추가한 다음 마우스가 들어올 때 어떤 블록이 먼저 마우스 이벤트를 수신하는지 확인하는 것입니다. 그러나 이것은 너무 많은 문제입니다. 나는 jquery를 기반으로 한 좋은 해결책을 찾았습니다. 솔직히 말해서 var 방향 = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90 ) 3) % 4; 이 문장에 사용된 수학적 지식은 정말 이해가 되지 않습니다. 원문에 영어 코멘트가 있어서 하나씩 설명하지는 않겠습니다. 코드가 많지 않아 예시만 작성했습니다.

<meta charset="UTF-8"> <title>마우스 진입 방향 결정</title> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} </style> <div id="wrap"> 방향성 피드백 </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

이동 위의 마우스를 클릭하면 효과를 볼 수 있습니다. 반환되는 방향 값은 각각 "상, 우, 하, 좌"에 해당하는 "0,1,2,3"입니다

그래서 결과 값을 전환하고 반복할 수 있습니다
스위치 (방향) { 사례 0: $(this).html('위에 입력하세요'); 부서지다; 사례 1: $(this).html('오른쪽으로 들어가세요'); 부서지다; 사례 2: $(this).html('아래에 입력하세요'); 부서지다; 사례 3: $(this).html('왼쪽에서 입력하세요'); 부서지다; } [Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

원본 코드는 jquery를 기반으로 하고 나중에 네이티브 js 효과를 작성했는데 코드는 캡슐화되지 않아 필요한 친구를 위해 사용되었습니다. Firefox 등의 브라우저에서는 mouseenter 및 mouseleave 이벤트를 지원하지 않기 때문에 대신 mouseover 및 mouseout을 사용했습니다. 버블링 문제를 해결하려면 직접 호환성 솔루션을 검색해야 합니다.
var Wrap = document.getElementById('wrap'); var hoverDir = 함수(e){ var w=wrap.offsetWidth; var h=wrap.offsetHeight; var x=(e.clientX - Wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y=(e.clientY - Wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var 방향 = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) 180) / 90) 3) % 4; var eventType = e.type; var dirName = new Array('위','오른쪽','아래','왼쪽'); if(e.type == 'mouseover' || e.type == 'mouseenter'){ Wrap.innerHTML=dirName[방향] 'Enter'; }또 다른{ Wrap.innerHTML=dirName[direction] '나가기'; } } if(window.addEventListener){ Wrap.addEventListener('mouseover',hoverDir,false); Wrap.addEventListener('mouseout',hoverDir,false); }else if(window.attachEvent){ Wrap.attachEvent('onmouseenter',hoverDir); Wrap.attachEvent('onmouseleave',hoverDir); } [Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]<script> $("#wrap").bind("mouseenter mouseleave", function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } }); </script>