JavaScript를 사용하여 마우스 이동 방향을 div로 가져오는 방법은 무엇인가요? 이제 막 JavaScript를 접한 많은 친구들이 이런 질문을 할 것이라고 믿습니다. 이 장에서는 JavaScript를 사용하여 div에서 마우스가 움직이는 방향을 얻는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
몇일전에 바이두 사진에서 텍스트 캡션을 보고 마우스 이동방향에 따라 로딩이 되는줄 알았습니다. 꽤 흥미롭기 때문에 그런 기능을 구현하고 싶습니다. 몇번의 검색과 검색 끝에 두 가지 구현 방법을 찾았습니다.
방법 1: 4개의 div를 사용하여 영역을 형성합니다. 어느 div에서 이동하는지가 이동 방향입니다.
방법 2: 마우스가 움직이는 지점, 즉 div의 왼쪽, 오른쪽, 위쪽, 아래쪽에 가장 가까운 쪽이 마우스가 움직이는 방향을 가져옵니다. .
방법 2의 경우 코드는 참고용으로 다음과 같습니다.
function getDirection(ev) { var mx = ev.clientX, my = ev.clientY; var el = this.offsetLeft, et = this.offsetTop, ew = this.clientWidth, eh = this.clientHeight; var left = mx - el, right = el + ew - mx, top = my - et, bottom = et + eh - my; var min = Math.min.apply(Math, [left, right, top, bottom]); if (min === left) { return "left"; } else if (min === right) { return "right"; } else if (min === top) { return "top" } else { return "bottom"; } }
위는 JavaScript가 방향을 얻을 수 있는 방법에 대한 전체 소개입니다. JavaScript 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 JavaScript는 div로 이동하는 마우스 방향을 어떻게 얻습니까?(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!