JavaScript - Toutiao のヘッダー ナビゲーション リストを実装する方法を教えていただけますか?クリックするとどのタイプが中央に表示されますか?

Question

現在クリックしているテクノロジーは中央にあります。他のテクノロジーをクリックして中央に移動するにはどうすればよいですか?

Answer 1

Militaryをクリックすると、Military domと親domの左側との距離を取得し、その距離を2で割って移動します

Answer 2

一番左をクリックして中央にすると、左側が空白になってしまいませんか？

Answer 3

どのタイプをクリックすると、このダムと親ダムの左側との間の距離が計算できます。
画面の幅を計算できます。
ダムの距離と画面の半分の幅を比較します。そしていつどこまで移動するかを判断します

Answer 4

margin-left:-(x * this.index)px;
現在クリックされているオブジェクトのインデックスを決定し、オフセットを計算します

Answer 5

昨日このデモテストを行ったところです。 Unexpected Encounter のレイアウトも Toutiao と同じです。
JQ実装方法:

html

リーリー

CSS

リーリー

jq

リーリー