스와이프 탭 전환 각 버튼을 클릭하면 스와이퍼 컨테이너가 움직입니다.
예를 들어 NetEase의 상단 탭 전환은 각 버튼을 클릭하면 탭 전환 컨테이너가 스크롤됩니다. (1: 좌우로 스크롤할 수 있으며 콘텐츠가 컨테이너 전체를 차지합니다.)
业精于勤，荒于嬉;行成于思，毁于随。
가로 스크롤 .topnav_list
.topnav_list
데모를 만들었습니다: https://codepen.io/anon/pen/d...
기본적인 기능만을 구현한 것으로, 이동위치가 그다지 정확하지 않습니다. 실제 사용시에는 이동량을 직접 조절하셔야 합니다.
원리는 각각의 .topnav_item 绑定一个 onClick 的 listener。当点击元素时，取得该元素在 topnav_list 中的 index，然后把 .topnav_list를 너비 * 인덱스 거리만큼 왼쪽으로 이동하는 것입니다(정확한 값은 아니며 조정이 필요함).
.topnav_item
onClick
topnav_list
DEMO에서는 ES2015의 일부 구문이 사용됩니다. 실제로 사용할 때는 브라우저 호환성에 주의하세요. 그림은 jQuery의 .scrollLeft() 메소드를 사용하여 수고를 덜어줍니다. 실제 사용에서는 직접 구현할 수 있습니다.
.scrollLeft()
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
가로 스크롤
.topnav_list데모를 만들었습니다: https://codepen.io/anon/pen/d...
기본적인 기능만을 구현한 것으로, 이동위치가 그다지 정확하지 않습니다. 실제 사용시에는 이동량을 직접 조절하셔야 합니다.
원리는 각각의
.topnav_item绑定一个onClick的 listener。当点击元素时，取得该元素在topnav_list中的 index，然后把.topnav_list를 너비 * 인덱스 거리만큼 왼쪽으로 이동하는 것입니다(정확한 값은 아니며 조정이 필요함).DEMO에서는 ES2015의 일부 구문이 사용됩니다. 실제로 사용할 때는 브라우저 호환성에 주의하세요. 그림은 jQuery의
.scrollLeft()메소드를 사용하여 수고를 덜어줍니다. 실제 사용에서는 직접 구현할 수 있습니다.