代码素材

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

特效介绍

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);
        }
    }
});
  • 0 次

本文链接:https://www.daimasucai.com//texiao-7.html

版权声明:本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。本站素材来源于网络,如有侵犯您的权益请及时告知,本站将及时处置。

上一篇:jQuery文字列表无缝隙循环向上滚动代码

下一篇:没有了

联系客服
手机端
手机端
手机端
返回顶部