请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

利用Swiper仿照今日头条APP头部的滑动导航

个人博客 2020-12-07 11:46 Swiper中文论坛 91 直达下载地址
图片展示:仿照今日头条APP头部的滑动导航,点击菜单可居中(只有一个小导航,并不是整个APP,不用想太多)代码部分<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>今日头...

图片展示:

仿照今日头条APP头部的滑动导航,点击菜单可居中 (只有一个小导航,并不是整个APP,不用想太多)

代码部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>今日头条APP顶部点击可居中导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="https://file.cbing.net/js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<style>
*{margin:0;padding:0;}
#topNav{width:100%;overflow:hidden;font:16px/32px hiragino sans gb, microsoft yahei, simsun;border-bottom:1px solid #f8f8f8;}
#topNav .swiper-slide{padding:0 5px;letter-spacing:2px;width:3rem;text-align:center;}
#topNav .swiper-slide span{transition:all .3s ease;display:block;}
#topNav .active span{transform:scale(1.1);color:#FF2D2D;}
img{width:100%;line-height:0;}
</style>
</head>
<body>
<img src="images/img01.png">
<div id="topNav" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide active"><span>推荐</span></div>
    <div class="swiper-slide"><span>热点</span></div>
    <div class="swiper-slide"><span>深圳</span></div>
    <div class="swiper-slide"><span>视频</span></div>
    <div class="swiper-slide"><span>社会</span></div>
    <div class="swiper-slide"><span>娱乐</span></div>
    <div class="swiper-slide"><span>科技</span></div>
    <div class="swiper-slide"><span>问答</span></div>
    <div class="swiper-slide"><span>汽车</span></div>
    <div class="swiper-slide"><span>财经</span></div>
    <div class="swiper-slide"><span>军事</span></div>
    <div class="swiper-slide"><span>体育</span></div>
    <div class="swiper-slide"><span>段子</span></div>
    <div class="swiper-slide"><span>美女</span></div>
    <div class="swiper-slide"><span>国际</span></div>
    <div class="swiper-slide"><span>趣图</span></div>
    <div class="swiper-slide"><span>健康</span></div>
    <div class="swiper-slide"><span>特产</span></div>
    <div class="swiper-slide"><span>房产</span></div>
  </div>
</div>
<img src="images/img02.png">
<script>
var mySwiper = new Swiper('#topNav',{
    freeMode:true,
    freeModeMomentumRatio:0.5,
    slidesPerView:'auto',
});
swiperWidth = mySwiper.container[0].clientWidth
maxTranslate = mySwiper.maxTranslate();
maxWidth = -maxTranslate + swiperWidth / 2
$(".swiper-container").on('touchstart', function(e){
    e.preventDefault()
})
mySwiper.on('tap', function(swiper, e){
    e.preventDefault()
    slide = swiper.slides[swiper.clickedIndex]
    slideLeft = slide.offsetLeft
    slideWidth = slide.clientWidth
    slideCenter = slideLeft + slideWidth / 2
    // 被点击slide的中心点
    mySwiper.setWrapperTransition(300)
    if (slideCenter < swiperWidth / 2){
        mySwiper.setWrapperTranslate(0)
    } else if (slideCenter > maxWidth){
        mySwiper.setWrapperTranslate(maxTranslate)
    } else{
        nowTlanslate = slideCenter - swiperWidth / 2
        mySwiper.setWrapperTranslate(-nowTlanslate)
    }
    $("#topNav .active").removeClass('active')
    $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')
})
</script>
</body>
</html>
普通下载地址:
Swiper仿照今日头条APP头部的滑动导航

常见问题FAQ

免费下载或者专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担,本站不承担任何责任。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可直接联系我们。
模板/插件不会安装或需要功能定制以及二次开发?
QQ或者微信联系我们。

本文转载:Swiper中文论坛 http://bbs.swiper.com.cn/

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:利用Swiper仿照今日头条APP头部的滑动导航

本文地址:https://www.cbing.net/daima/12.html

分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1