84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
現在點的科技，科技就在中間，如何點其他也跑到中間？
Following the voice in heart.
點擊軍事的時候，獲得軍事這個dom距離父級dom左邊的距離，把拿到的距離除以2，然後做移動
如果點最左邊上的，居中的話左邊不就是空白的了？
點擊哪個類型的時候，這個dom距離父級的dom的左邊的距離是可以算的吧，屏幕的寬度是可以算的吧，dom的距離與屏幕一半寬的大小做比較，然後再判斷時間移動和移動多少距離
margin-left:-(x * this.index)px;判斷當前點擊物件的index 然後計算出偏移量
昨天剛好做了這個demo測試。不期而遇佈局方式也與今日頭條的一樣。JQ實作方式：
html
第0个 第1个 第2个 第3个 第4个 第5个 第6个 第7个 第8个
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); }) 期待更好的方式。
點擊軍事的時候，獲得軍事這個dom距離父級dom左邊的距離，把拿到的距離除以2，然後做移動
如果點最左邊上的，居中的話左邊不就是空白的了？
點擊哪個類型的時候，這個dom距離父級的dom的左邊的距離是可以算的吧，
屏幕的寬度是可以算的吧，
dom的距離與屏幕一半寬的大小做比較，然後再判斷時間移動和移動多少距離
margin-left:-(x * this.index)px;
判斷當前點擊物件的index 然後計算出偏移量
昨天剛好做了這個demo測試。不期而遇佈局方式也與今日頭條的一樣。
JQ實作方式：
html
css
jq