头像

移动端仿今日头条App顶部导航点击可居中滑动导航

2020-05-13 09:39:43 收藏 来源:it素材网   浏览(103)   评论 ( 0 )   

移动端仿今日头条App顶部导航点击可居中滑动导航
插件描述:移动端仿今日头条App顶部导航点击可居中滑动导航注:请在移动端预览,PC端无效果。使用方法文件包包含JS、CSS文件 和 案例文件index.html,(注:导航为swiper插件)。1、引入JS和CSS文件<link&nb
查看演示 下载资源:1 下载资源 下载积分:0

插件描述:移动端仿今日头条App顶部导航点击可居中滑动导航

注:请在移动端预览,PC端无效果。

使用方法

文件包包含JS、CSS文件 和 案例文件index.html,(注:导航为swiper插件)。

1、引入JS和CSS文件

<link rel="stylesheet" href="css/swiper.min.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/swiper.min.js"></script>

2、编写导航HTML,并设置ID,因为是基于swiper插件,所有HTML必须符合swiper规则。

<div id="TouchNav">
 <div >
   <div ><span>推荐</span></div>
   <div ><span>热点</span></div>
   <div ><span>更多</span></div>
   <div ><span>更多</span></div>
 </div>
</div>

3、设置对象动作做了调整,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);
        }
    }
});


标签: 滑动导航
声明:转载请注明来源(it素材网)并保留原文链接:https://www.itsucai.com/js/259.html
评论0

后面还有条评论,点击查看>>

系统已开启自动识别垃圾评论机制,识别到的自动封号!!!