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

所属分类:导航,APP模板-水平导航,手机导航

 17918  201  查看评论 (4)
分享到微信朋友圈
X
仿今日头条App顶部导航点击可居中(优化版) ie兼容10

更新时间: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);
        }
    }
});
相关插件-水平导航,手机导航

jQuery漂亮的滑出菜单

jQuery漂亮的滑出菜单
  水平导航
 37526  359

二级菜单导航栏

简单的菜单栏
  水平导航
 60487  462

会唱歌的音乐导航

基于jQuery模拟模拟音乐导航
  水平导航
 35580  339

jQuery企业网站下拉导航

jQuery企业网站半透明下拉导航
  水平导航
 53799  621

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ricefoto 0
    2020/9/24 17:39:18
    怎样实现当前页面焦点居中效果呢 回复
    Wind 0
    2020/3/26 8:37:48
    #TouchNav .swiper-slide ---这个样式的宽定死了 width: 3rem; 能否改为自动适应?
    还有把宽去掉,定最小宽 min-width:3rem 都不行,有没有改善的办法?
    因为如果要通用起来,这的文字无法确保只是2个; 求解!!
        Wind1
        2020/3/26 8:41:11
        找到办法了,把#TouchNav .swiper-slide 的宽定为 width: auto;
        因为swiper.min.css 里面把 .swiper-slide 宽设为了100%
    回复
    tr123 0
    2020/3/18 18:37:31
    怎样实现的居中效果呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复