javascript - Toutiao의 헤더 탐색 목록을 구현하는 방법을 안내해 줄 수 있는 사람이 있습니까? 클릭하면 어떤 유형이 중앙에 표시됩니까?

Question

지금 클릭하는 기술이 중앙에 있습니다. 어떻게 다른 기술을 클릭하여 중앙으로 이동할 수 있습니까?

ringa_lee · Answer

군사 클릭시 군돔과 부모돔 왼쪽 사이의 거리를 구한 후 거리를 2로 나눈 후 이동시켜주세요

PHP中文网 · Answer

가장 왼쪽을 클릭해서 중앙에 놓으면 왼쪽이 비어있지 않나요?

伊谢尔伦 · Answer

어떤 유형을 클릭하면 이 돔과 상위 돔의 왼쪽 사이의 거리를 계산할 수 있습니다.
화면 너비를 계산할 수 있습니다.
돔의 거리를 화면 너비의 절반과 비교하세요. 그리고 언제 움직여야 할지, 얼마나 멀리 움직여야 할지 판단하세요

迷茫 · Answer

margin-left:-(x * this.index)px;
현재 클릭한 개체의 인덱스를 결정한 다음 오프셋을 계산합니다

女神的闺蜜爱上我 · Answer

어제 데모 테스트를 했습니다. Unexpected Encounter의 레이아웃도 Toutiao와 동일합니다.
JQ 구현 방법:

html

으아악

css

으아악

jq

으아악

Php8, 나도 갈게