javascript - Bolehkah sesiapa membimbing saya tentang cara melaksanakan senarai navigasi pengepala Toutiao?

Question

Teknologi yang saya klik sekarang berada di tengah-tengah. Bagaimana saya boleh mengklik pada perkara lain dan pergi ke tengah?

Answer 1

Apabila mengklik Tentera, dapatkan jarak antara dom tentera dan sebelah kiri dom induk, bahagikan jarak dengan 2, dan kemudian gerakkannya

Answer 2

Jika anda mengklik yang paling kiri dan memusatkannya, bukankah bahagian kiri akan kosong?

Answer 3

Apabila anda klik pada jenis yang mana, jarak antara dom ini dan sebelah kiri dom induk boleh dikira
Lebar skrin boleh dikira
Bandingkan jarak dom dengan separuh lebar skrin. dan kemudian membuat pertimbangan Bila hendak bergerak dan sejauh mana hendak bergerak

Answer 4

margin-left:-(x * this.index)px;
Tentukan indeks objek yang sedang diklik dan kemudian hitung offset

Answer 5

Saya baru sahaja melakukan ujian demo ini semalam. Susun atur Unexpected Encounter juga sama seperti Toutiao.
Kaedah pelaksanaan JQ:

html

<ul class="nav" >
    <li class="active">第0个</a>
    <li>第1个</a>
    <li>第2个</a>
    <li>第3个</a>
    <li>第4个</a>
    <li>第5个</a>
    <li>第6个</a>
    <li>第7个</a>
    <li>第8个</a>
</ul        

css

.nav{
    white-space: nowrap;
    overflow-x: scroll;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.nav li{
    display: inline-block;
    margin: 0 12px;
    line-height: 0.8rem;
    color: #222222;
     padding: 20px 0;
}
.nav .active{color:#F23030;}

jq

//导航条宽度
var navW = $('.navs').width();
//页面宽度
var docW = $(document).width();
$('.nav li').click(function(){
    //移除样式
    $('.nav li').removeClass('active');
    //当前添加样式
    $(this).addClass('active');
    //当前li宽度
    var thisW = $(this).width();
    //要移动的距离
    var left = $('.nav').scrollLeft() + ($(this).offset().left)-(docW/2 - thisW/2);
    $('.nav').animate({scrollLeft:left},300);
})

期待更好的方式。