프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]

프로젝트 설명

로그인 등록 레이아웃 구축

목록 레이아웃 구성

로고와 검색창

제품 카테고리 탐색 레이아웃

경로 탐색 레이아웃

경로 탐색 데이터의 동적 렌더링

왼쪽 돋보기 레이아웃 구성

돋보기 마우스 이동 효과

돋보기 마우스를 움직여 마스크 요소의 드래그 효과를 구현하세요.

마스크 요소 이동을 위한 경계 제어

돋보기를 움직이면 큰 그림 요소를 같은 비율로 움직이는 효과가 나타납니다.

돋보기 썸네일 레이아웃 구성 효과

돋보기 썸네일 데이터의 동적 렌더링

축소판을 클릭하면 이미지가 더 작거나 큰 이미지로 변경됩니다.

썸네일의 좌우 화살표 클릭을 통한 이미지 캐러셀 효과 원리 분석

각 그림 이동 거리와 UL 이동 거리를 계산합니다.

오른쪽 제품 상단의 상세 소개 레이아웃

오른쪽 제품 상단에 대한 자세한 설명은 데이터의 동적 렌더링을 소개합니다.

오른쪽 제품 하단에 대한 제품 매개변수 레이아웃 구성

오른쪽 제품 하단에 제품 매개변수 데이터의 동적 렌더링

독점 효과를 보려면 제품 매개변수 첫 번째 행의 텍스트 색상을 클릭하세요.

클로저 함수를 사용하여 루프 내 이벤트의 변수 문제 해결

선택 결과의 레이아웃 구성 구현

해당 결과를 동적으로 추가하려면 제품 매개변수를 클릭하세요.

해당 매개변수 데이터를 삭제하려면 삭제 버튼을 클릭하세요.

패키지 가격 변경 기능

장바구니 및 구매가격 레이아웃 구축

왼쪽 가운데 탭의 전체 구조 레이아웃

왼쪽 중간 탭의 특정 콘텐츠 레이아웃 구성

중앙의 오른쪽에 일치하도록 전체 구조 레이아웃을 선택하십시오.

코로케이션에서 체크박스 선택 시 패키지 가격 연계 효과 선택

오른쪽 가운데 탭 레이아웃 만들기

공개 탭 기능을 캡슐화하고 호출

오른쪽 네비게이션 바의 작업 부분 구성

오른쪽 탐색 모음의 중간 레이아웃 구성

오른쪽 탐색 모음을 클릭하여 상태 전환 구현