仿今日头条app手机端顶部触屏滑动导航

swiper.js
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="swiper.min.css">
    <style type="text/css">
        * {
            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>

    </body>
</html>
<script src="jquery-3.2.1.min.js"></script>
<script src="swiper-3.4.0.min.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) { 
    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>
仿今日头条app手机端顶部触屏滑动导航

猜你喜欢
