JavaScript를 사용하여 마우스 이동 방향을 div로 가져오는 방법

이 글의 내용은 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가 div로 이동하는 마우스 방향을 얻는 방법에 대한 전체 소개입니다. JavaScript Tutorial에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요.

위 내용은 JavaScript를 사용하여 마우스 이동 방향을 div로 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!