仿今日头条APP顶部点击可居中导航

 查看演示  website  立即下载

注：请在移动端预览，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、设置对象动作

var TouchNav = new Swiper('#TouchNav', {
    freeMode: true,
    freeModeMomentumRatio: 0.5,
    slidesPerView: 'auto',
});

详细操作可依据案例文件进行。

PREVIOUS:
NEXT:
粉碎立方体小游戏
jQuery轮播图支持手机端拖拽轮播(原创)