仿今日头条App顶部导航点击可居中(优化版)

 查看演示  website  立即下载

更新时间：2020-03-02 00:08:57

首先很感谢作者的demo,如有问题请留言,仅为分享

使用方法请参考

http://www.jq22.com/jquery-info21612

原作者作品升级swiper.min.js为Swiper5版本

设置对象动作做了调整,Swiper5的新特性,此外某些机型对Swiper5的事件兼容不好,可以用框架自带的点击事件实现

var TouchNav = new Swiper('#TouchNav', {
    freeMode: true,
    freeModeMomentumRatio: 0.5,
    centeredSlides: true,
    centeredSlidesBounds: true,
    slidesPerView: 'auto',
    on: {
        tap: function() {
            $("#TouchNav  .active").removeClass('active');
            $("#TouchNav .swiper-slide").eq(this.clickedIndex).addClass('active');
            TouchNav.slideTo(this.clickedIndex);
        }
    }
});

PREVIOUS:
NEXT:
css3鼠标悬停导航条动画
基于ets柱状图后台和表格上下滚动（原创）