問(wèn)題描述

現(xiàn)在點(diǎn)的科技，科技就在中間，如何點(diǎn)其他其他也跑到中間？

問(wèn)題解答

點(diǎn)擊軍事的時(shí)候，獲得軍事這個(gè)dom距離父級(jí)dom左邊的距離，把拿到的距離除以2，然后做移動(dòng)

如果點(diǎn)最左邊上的，居中的話左邊不就是空白的了？

點(diǎn)擊哪個(gè)類型的時(shí)候，這個(gè)dom距離父級(jí)的dom的左邊的距離是可以算的吧，屏幕的寬度是可以算的吧，dom的距離與屏幕一半寬的大小做比較，然后再判斷時(shí)候移動(dòng)和移動(dòng)多少距離

margin-left:-(x * this.index)px;判斷當(dāng)前點(diǎn)擊對(duì)象的index 然后計(jì)算出偏移量

昨天剛好做了這個(gè)demo測(cè)試。不期而遇布局方式也與今日頭條的一樣。JQ實(shí)現(xiàn)方式：

html

<ul > <li class='active'>第0個(gè)</a> <li>第1個(gè)</a> <li>第2個(gè)</a> <li>第3個(gè)</a> <li>第4個(gè)</a> <li>第5個(gè)</a> <li>第6個(gè)</a> <li>第7個(gè)</a> <li>第8個(gè)</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

//導(dǎo)航條寬度var navW = $(’.navs’).width();//頁(yè)面寬度var docW = $(document).width();$(’.nav li’).click(function(){ //移除樣式 $(’.nav li’).removeClass(’active’); //當(dāng)前添加樣式 $(this).addClass(’active’); //當(dāng)前l(fā)i寬度 var thisW = $(this).width(); //要移動(dòng)的距離 var left = $(’.nav’).scrollLeft() + ($(this).offset().left)-(docW/2 - thisW/2); $(’.nav’).animate({scrollLeft:left},300);})期待更好的方式。