当前位置： 移动技术网 > IT编程>开发语言>Jquery > jq+swiper 实现今日头条App的选项卡效果

jq+swiper 实现今日头条App的选项卡效果

2019年07月03日  | 移动技术网IT编程  | 我要评论 
<!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="https://cdn.bootcss.com/swiper/4.0.6/css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #topnav {
            width: 100%;
            overflow: hidden;
            font: 18px;
        }

        #topnav .swiper-slide {
            padding: 0 10px;
            width: auto;
            text-align: center;
        }

        #topnav .swiper-slide span {
            transition: all .3s ease;
            display: block;
        }

        #topnav .active span {
            color: #ff2d2d;
            border-bottom: 3px solid #ff2d2d;
        }

        .tab-list {
            display: none;
        }
    </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>
    </div>
    <div class="tab-list-box">
        <div class="tab-list" style="display:block;">内容1</div>
        <div class="tab-list">内容2</div>
        <div class="tab-list">内容3</div>
        <div class="tab-list">内容4</div>
        <div class="tab-list">内容5</div>
        <div class="tab-list">内容6</div>
        <div class="tab-list">内容7</div>
        <div class="tab-list">内容8</div>
        <div class="tab-list">内容9</div>
        <div class="tab-list">内容10</div>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.4.2/js/swiper.js"></script>
    <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');

            $(".tab-list").eq(swiper.clickedindex).fadein().siblings('.tab-list').hide();
        });
    </script>
</body>

</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网