仿今日头条滑动导航栏

Posted 撸的一手好诗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿今日头条滑动导航栏相关的知识，希望对你有一定的参考价值。

<!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">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="resources/js/swiper.min.js"></script>
    <style>
* {
	margin: 0;
	padding: 0;
}
#topNav {
	width: 100%;
	overflow: hidden;
	font: 18px hiragino sans gb, microsoft yahei, simsun;
}
#topNav .swiper-slide {
	padding: 0 1.1rem;
	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;
	border-bottom: 3px solid #FF2D2D;
}
</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="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>

　　

以上是关于仿今日头条滑动导航栏的主要内容，如果未能解决你的问题，请参考以下文章

vue 仿今日头条

vue 仿今日头条

微信仿今日头条导航栏滚动

自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)

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

前端微信小程序资讯类仿今日头条微信小程序