<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>今日頭條APP頂部點(diǎn)擊可居中導(dǎo)航</title>
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
? ? <link rel="stylesheet" >
? ? <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>首頁(yè)</span></div>
? ? ? ? ? ? <div class="swiper-slide"><span>熱點(diǎn)</span></div>
? ? ? ? ? ? <div class="swiper-slide"><span>汽車</span></div>
? ? ? ? ? ? <div class="swiper-slide"><span>視頻</span></div>
? ? ? ? ? ? <div class="swiper-slide"><span>社會(huì)</span></div>
? ? ? ? ? ? <div class="swiper-slide"><span>娛發(fā)</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;">內(nèi)容1</div>
? ? ? ? <div class="tab-list">內(nèi)容2</div>
? ? ? ? <div class="tab-list">內(nèi)容3</div>
? ? ? ? <div class="tab-list">內(nèi)容4</div>
? ? ? ? <div class="tab-list">內(nèi)容5</div>
? ? ? ? <div class="tab-list">內(nèi)容6</div>
? ? ? ? <div class="tab-list">內(nèi)容7</div>
? ? ? ? <div class="tab-list">內(nèi)容8</div>
? ? ? ? <div class="tab-list">內(nèi)容9</div>
? ? ? ? <div class="tab-list">內(nèi)容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
? ? ? ? ? ? // 被點(diǎn)擊slide的中心點(diǎn)
? ? ? ? ? ? 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>
推薦一下我自己的前端學(xué)習(xí)群562862926，里面有大神總結(jié)的一套前端教學(xué)視頻逗余，歡迎有興趣的朋友進(jìn)群一起學(xué)習(xí)
