沉浸式阅读
Beta
转载

swiper制作头条APP顶部点击可居中导航效果

     订阅 网页特效     2020-07-07     网络    713    0    0    0    2020-07-07
学习要点:swiper官方下载 3.4.2版本的基础包

使用前请自行去 swiper官方下载  3.4.2版本的基础包  ,话不多说,直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; 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="js/jquery-1.10.1.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>
    <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="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="images/img02.png">
<script type="text/javascript">
    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顶部点击可居中导航效果

本文链接: https://www.mbkfw.com/course/764.html (转载时请注明来源链接)

本文说明: 本文来源于网络转载,有问题请发送至: 邮箱/kf@dtmuban.com 进行修改或删除

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
本文标签: #swiper #导航 #切换 #tab #效果
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈