
插件描述:移动端仿今日头条App顶部导航点击可居中滑动导航注:请在移动端预览,PC端无效果。使用方法文件包包含JS、CSS文件 和 案例文件index.html,(注:导航为swiper插件)。1、引入JS和CSS文件<link&nb
插件描述:移动端仿今日头条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); } } });
系统已开启自动识别垃圾评论机制,识别到的自动封号!!!