javascript - 哪位大神指导下，如何实现今日头条头部导航列表，点那个类型，哪种类型就居中了？

问题描述

现在点的科技，科技就在中间，如何点其他其他也跑到中间？

问题解答

点击军事的时候，获得军事这个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);})期待更好的方式。