javascript - 哪位大神指导下,如何实现今日头条头部导航列表,点那个类型,哪种类型就居中了?
typecho
typecho 2017-06-30 09:52:13
[JavaScript讨论组]


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

typecho
typecho

Following the voice in heart.

全部回复(5)
ringa_lee

点击军事的时候,获得军事这个dom距离父级dom左边的距离,把拿到的距离除以2,然后做移动

PHP中文网

如果点最左边上的,居中的话左边不就是空白的了?

伊谢尔伦

点击哪个类型的时候,这个dom距离父级的dom的左边的距离是可以算的吧,
屏幕的宽度是可以算的吧,
dom的距离与屏幕一半宽的大小做比较,然后再判断时候移动和移动多少距离

迷茫

margin-left:-(x * this.index)px;
判断当前点击对象的index 然后计算出偏移量

女神的闺蜜爱上我

昨天刚好做了这个demo测试。不期而遇布局方式也与今日头条的一样。
JQ实现方式:

html

<ul class="nav" >
    <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);
})

期待更好的方式。
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号