HTML, CSS 및 Javascript를 사용하여 탐색을 수행합니다.

HTML, CSS 및 Javascript를 사용하여 탐색을 수행합니다.

반응형

=======================================================

독자 분께,

마우스로 탐색을 가리키기만 해도 스트립이나 하이라이트가 표시되는 멋진 웹 사이트를 본 적이 있을 것입니다. 후속 탐색을 보여줄 간단한 프로젝트를 만들어 봅시다. 페이지에는 이러한 링크가 있습니다. 링크 중 하나를 가리키면 알약 모양의 강조 표시와 함께 크기를 조정할 수 있을 뿐만 아니라 페이지 이동 경로를 따라 이동할 수도 있습니다. 이제 구현 부분으로 들어가 보겠습니다.

index.html — 페이지에 표시되는 요소 구조를 정의하는 HTML 레이아웃을 포함합니다.

이미지는 우리 프로젝트의 폴더 안에 직접 배치됩니다.

style.css- 스타일링에 대한 CSS 코드를 포함합니다. CSS를 사용하여 다양한 부분을 스타일링하여 시각적으로 더 매력적으로 만들 수 있습니다.

HTML 레이아웃

VScode를 열고 !로 index.html 파일에 기본 HTML 구조를 만든 다음 탭을 누릅니다. 제목을 Follow-Aroong Navigation 으로 지정하십시오. style.css를 연결하고 < nav > 태그 아래에 앵커 태그 < a >를 사용하여 몇 개의 링크를 추가합니다. < 바닥글 > 태그를 사용하여 바닥글 섹션을 표시합니다. 간단한 HTML입니다.

index.filength

CSS 스타일링

본문 스타일링을 위해 배경 이미지, 글꼴 패밀리, 색상을 사용하고 이미지와 텍스트 정렬을 조정했습니다.h1 및 탐색 요소에 일부 패딩 추가

style.css

앵커 요소에 색상, 패딩, 글꼴 크기를 추가합니다. 클래스 요소를 강조 표시하려면 배경, 테두리 반지름을 추가하여 곡선 모서리가 강조 표시됩니다. 한 요소에서 다른 요소로 하이라이트를 부드럽게 전환하기 위해 0.2초의 전환을 추가합니다.강조 표시의 z 색인은 -1이며 링크 텍스트 뒤에 배치됩니다.

style.css

빨간색 하트를 표시하기 위해 하트 클래스에 색을 부여합니다.

.heart{color: #b14240;}

자바스크립트 논리

호킹될 모든 링크 요소를 가져와 트리거 변수에 저장합니다.하이라이트 클래스를 추가하고 나중에 DOM에 추가해 보겠습니다. 트리거를 사용하여.각() 각 링크를 사용하고 마우스 입력을 위한 이벤트 수신기를 추가하면 하이라이트Link() 함수를 실행합니다.우리는 너비, 높이, X축 및 Y축 값을 계산해야 합니다. 즉, 우리가 호킹한 요소가 얼마나 크고 페이지 어디에 있는지 파악해야 합니다..getBoundingClientRect()라는 메소드를 사용하여 페이지에서 링크 요소 위치를 가져오고 얻은 상단 및 왼쪽 값에 대해 window.scrolLY 및 window.scrollX 값 즉, 아래로 스크롤하여 오른쪽 값을 스크롤합니다.

이 값을 강조 너비 및 높이로 설정합니다. 변환() 방법은 X축과 Y축에 대해 주어진 파라미터에 따라 요소를 현재 위치에서 이동합니다. 변환 방법을 사용하여 x축과 y축 위치를 설정합니다.

하이라이트.스타일을 선택합니다.너비 = `${s.너비}px";

하이라이트.스타일을 선택합니다.높이 = ${s.높이}px";

하이라이트.style.px = `https{s.left}px, ${s.top}px);

최종 결과는 여기에 있다.

https://www.youtube.com/watch?v=mw2Fmn_P_S0

완전한 소스 코드가 여기에 있습니다.

관심 가져주셔서 감사합니다.

디브야 M C M

from http://information-bada.tistory.com/10 by ccl(A) rewrite - 2021-10-10 10:28:11