JavaScript는 div로 이동하는 마우스 방향을 어떻게 얻습니까?(코드 예)

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!