首頁 > 網際網路

利用jq實現橫向tab分類切換自動居中

2019-12-11 15:39:58

平時我們逛手機商城,像拼多多啊之類的,分類tab的效果是點選某個分類會將此分類自動居中。看起來很高大上,其實這種實現很簡單,主要都是一些算數的問題。懂了他們之間的關係就迎刃而解了。


1

看過我經驗的小盆友都知道我的習慣,第一就是先搭建基本的架構樣式,直接上圖。我這裡要臭美一下了,我這裡採用了flex布局,真心舒服,它會自動幫你排好li,不需要浮動left又要計算它的ul寬度,還要動態賦值上去,多麻煩。



2

然後就是寫js來玩轉它,思路也很簡單,我這裡獲取三個關鍵的數值:

1.當前點選的li距離螢幕左邊的距離

2.li的寬度的一半

3.總螢幕寬度的一半

4.當前捲軸捲動的距離

最後結果:

當前捲軸捲動的距離+(當前點選的li距離螢幕左邊的距離-總螢幕寬度的一半)+li的寬度的一半


3

最終效果圖如下




IT145.com E-mail:sddin#qq.com