問題描述

現在點的科技，科技就在中間，如何點其他其他也跑到中間？

問題解答

點擊軍事的時候，獲得軍事這個dom距離父級dom左邊的距離，把拿到的距離除以2，然后做移動

如果點最左邊上的，居中的話左邊不就是空白的了？

點擊哪個類型的時候，這個dom距離父級的dom的左邊的距離是可以算的吧，屏幕的寬度是可以算的吧，dom的距離與屏幕一半寬的大小做比較，然后再判斷時候移動和移動多少距離

margin-left:-(x * this.index)px;判斷當前點擊對象的index 然后計算出偏移量

昨天剛好做了這個demo測試。不期而遇布局方式也與今日頭條的一樣。JQ實現方式：

html

<ul > <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);})期待更好的方式。