여기서는 jQuery를 사용하여 팝업 js를 만들고 간단한 데모를 만들었습니다.
방향
마우스의 현재 위치에 따라 화살표가 다른 방향을 가리킵니다.
왼쪽 위(기본값), 왼쪽 아래, 오른쪽 위, 오른쪽 아래, 왼쪽 위, 오른쪽 위 사각형(오른쪽 위), 왼쪽 아래(왼쪽 아래), 오른쪽 아래(아래) -맞습니다)
우선순위
위 각 상황의 우선순위는 순서대로 낮아집니다
아이디어 감지
탐지의 기본 개념은 다음과 같습니다.
우선 컨테이너의 높이나 너비가 해당 팝업창의 높이나 너비의 2배인지를 판단하는 것도 전제조건입니다. 2배인 이유는 임계점이 중간점이기 때문입니다. 대상 컨테이너의 각 측면
/*
* 먼저 대상 컨테이너의 높이 또는 너비가 해당 컨테이너의 높이 또는 너비와 화살표 크기의 합의 두 배인지 확인합니다. 그렇지 않으면 오류가 보고됩니다. 2번인 이유는 임계점이 대상 컨테이너의 각 변의 중간 지점이기 때문입니다.
*/
다음으로 우선순위에 따라 하나씩 판단하시면 됩니다.
/*
* 왼쪽을 먼저 감지한 다음 오른쪽을 감지하는 것이 좋습니다. 왼쪽과 오른쪽을 수용할 수 없는 경우 위쪽을 확인하여 둘 다 제외하고 고려합니다. 아래쪽. 왼쪽과 오른쪽을 감지할 때는 먼저 상단을 낮출 수 있는지 여부를 고려하고, 위쪽과 아래쪽을 감지할 때는 먼저 왼쪽과 오른쪽 사이의 거리가 큰지 여부를 고려하세요.
* 1.왼쪽을 감지할 때 화살표 오프셋으로 상하 거리를 내려놓을 수 있는지 판단합니다(상부 등). '위', '왼쪽'], 오른쪽 같은 쪽
* 2.상하 감지 시 화살표 오프셋으로 좌우 거리를 낮출 수 있는지 판단합니다(기본값은 위쪽, 즉 상단). 낮출 수 없는 경우에는 마우스가 기울어진 쪽(왼쪽
* 기본값은 왼쪽, 위쪽입니다.
*/
특정 상황에 따른 판단:
•우선순위에 따라 먼저 팝업창을 마우스 오른쪽에 놓을 수 있는지 여부를 결정합니다.
◦ 내려놓을 수 있으면 다른 화살을 꽂을 수 있는지 판단하세요
■놓을 수 있다면
■ 그런 다음 화살표의 오프셋을 포함하여 화살표를 상단에 배치할 수 있는지 여부를 결정합니다.
■ 화살표가 오프셋을 포함하여 상단에 배치될 수 있고 대상 컨테이너의 높이를 초과하지 않는 경우 왼쪽 상단입니다
■ 그렇지 않고 상단이 팝업 창 높이보다 크고 화살표를 오프셋을 포함하여 하단에 놓을 수 있는 경우 왼쪽 하단입니다
■ 그 외 화살표 및 팝업창을 하단에 배치해도 된다고 판단되면 좌측상단
■ 그 외에는 전제 조건에 따라 왼쪽 하단입니다
■놓을 수 없는 경우 하단에 팝업창과 화살표를 내려놓을 수 있는지 판단하세요
■가능하면 왼쪽 상단
■ 그렇지 않은 경우 왼쪽 하단
◦ 내려놓을 수 없다면 왼쪽을 고려한 후 오른쪽으로 바꿔도 같은 생각
8개 팝업창 상황과 위치
왼쪽 상단 예
N번 작성한 코드를 리팩토링하고 N줄의 코멘트를 작성하고 나니 문득, 사실 코드를 작성하는 일이든 생활하는 일이든 우리 모두에게는 정해져 있거나 관습적인 전제나 기준이 있다는 생각이 들었습니다. 그리고 이 규범이 깨지면 이전의 모든 노력이 물거품이 되는 경우가 많고, 그렇지 않더라도 큰 상처를 받는 경우가 많습니다. 예는 코드부터 사회까지 예외 없이 다양합니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
