swiper.js仿今日头条app手机端顶部触屏滑动导航代码，基于jQuery实现的顶部点击可居中导航条特效。
使用方法
文件包包含JS、CSS文件 和 案例文件index.html，(注：导航为swiper插件)。
1、引入JS和CSS文件
<link rel="stylesheet" href="css/swiper.min.css"> <script src="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);
}
}
});
标签：
本文链接：https://www.daimasucai.com//texiao-7.html
版权声明：本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。 我们不承担任何技术及版权问题，且不对任何资源负法律责任。本站素材来源于网络，如有侵犯您的权益请及时告知，本站将及时处置。
下一篇：没有了
评论(0)