js 模拟今日头条导航栏（触屏）

最新推荐文章于 2021-06-08 22:10:36 发布
最新推荐文章于 2021-06-08 22:10:36 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： Web 文章标签： 模拟今日头条tab导航
本文介绍两种实现顶部导航点击后居中显示的方法：一种使用jQuery，通过计算元素位置实现平滑滚动；另一种使用Swiper轮播库，适用于不同版本，提供流畅的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.jq 方式

1.1 代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css"> header { width: 100%; overflow: hidden; white-space: nowrap; overflow-x: scroll; }  header::-webkit-scrollbar { display: none; }  .nav { display: inline-block; margin-left: 15px; margin-right: 10px; height: 50px; line-height: 50px; } </style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<header>
			<div class="nav"> 推荐 推荐 推荐 推荐 推荐 推荐 推荐 </div>
			<div class="nav"> 视频 </div>
			<div class="nav"> 新闻 </div>
			<div class="nav"> 体育 </div>
			<div class="nav"> 社会 </div>
			<div class="nav"> 娱乐 </div>
			<div class="nav"> 军事 推荐 推荐 推荐 推荐 推荐 </div>
			<div class="nav"> 人文 </div>
			<div class="nav"> 地理 </div>
			<div class="nav"> 历史 </div>
		</header>
		<script type="text/javascript">
			$(function() {
				$(".nav").on("click", function(ev) {
					var moveX = $(this).position().left + $(this).parent().scrollLeft();
					var pageX = document.documentElement.clientWidth;
					var blockWidth = $(this).width();
					console.log(moveX)
					console.log(pageX);
					console.log(blockWidth);
					var left = moveX - (pageX / 2) + (blockWidth / 2);
					console.log(left);
					$(this).css("color", "red").siblings().css("color", "#000000");
					$("header").scrollLeft(left);
				});
			});
		</script>
	</body>
</html>

1.2 效果 

2. swiper 方式

2.1  代码 (swiper为3.x的版本的方式)

<!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 href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.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; text-align: center; width: auto !important; }  #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">
				<span class="swiper-slide active"><span>推荐</span></span>
				<span class="swiper-slide"><span>热点热点热点热点</span></span>
				<span class="swiper-slide"><span>深圳</span></span>
				<span class="swiper-slide"><span>视频</span></span>
				<span class="swiper-slide"><span>社会</span></span>
				<span class="swiper-slide"><span>娱乐</span></span>
				<span class="swiper-slide"><span>科技</span></span>
				<span class="swiper-slide"><span>问答</span></span>
				<span class="swiper-slide"><span>汽车</span></span>
				<span class="swiper-slide"><span>财经</span></span>
				<span class="swiper-slide"><span>军事</span></span>
				<span class="swiper-slide"><span>体育</span></span>
				<span class="swiper-slide"><span>段子</span></span>
				<span class="swiper-slide"><span>美女</span></span>
				<span class="swiper-slide"><span>国际</span></span>
				<span class="swiper-slide"><span>趣图</span></span>
				<span class="swiper-slide"><span>健康</span></span>
				<span class="swiper-slide"><span>特产</span></span>
				<span class="swiper-slide"><span>房产</span></span>
			</div>
		</div>
		<script type="text/javascript">
			initSwiper();

			function initSwiper() {
				var mySwiper = new Swiper('#topNav', {
					freeMode: true,
					freeModeMomentumRatio: 0.5,
					slidesPerView: 'auto',
				});

				var 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()

					var 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>

2.2 或者 用 swiper 为 4.x 的版本  (和3.x的版本的区别就是swiper的某些方法使用发生了变化而已，原理相同)

<!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 href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.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; text-align: center; width: auto !important; }  #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">
			<span class="swiper-slide active"><span>推荐</span></span>
			<span class="swiper-slide"><span>热点热点热点热点</span></span>
			<span class="swiper-slide"><span>深圳</span></span>
			<span class="swiper-slide"><span>视频</span></span>
			<span class="swiper-slide"><span>社会</span></span>
			<span class="swiper-slide"><span>娱乐</span></span>
			<span class="swiper-slide"><span>科技</span></span>
			<span class="swiper-slide"><span>问答</span></span>
			<span class="swiper-slide"><span>汽车</span></span>
			<span class="swiper-slide"><span>财经</span></span>
			<span class="swiper-slide"><span>军事</span></span>
			<span class="swiper-slide"><span>体育</span></span>
			<span class="swiper-slide"><span>段子</span></span>
			<span class="swiper-slide"><span>美女</span></span>
			<span class="swiper-slide"><span>国际</span></span>
			<span class="swiper-slide"><span>趣图</span></span>
			<span class="swiper-slide"><span>健康</span></span>
			<span class="swiper-slide"><span>特产</span></span>
			<span class="swiper-slide"><span>房产</span></span>
		</div>
	</div>
	<script type="text/javascript">
			var mySwiper = new Swiper('#topNav', {
				freeMode: true,
				freeModeMomentumRatio: 0.5,
				slidesPerView: 'auto',
				touchStartPreventDefault : false,
				on:{
					click:function(event){
						var swiperWidth = mySwiper.width,
							maxTranslate = mySwiper.maxTranslate(),
							maxWidth = -maxTranslate + swiperWidth / 2;
						var slide = mySwiper.slides[mySwiper.clickedIndex],
							slideLeft = slide.offsetLeft,
							slideWidth = slide.clientWidth,
							slideCenter = slideLeft + slideWidth / 2;
						// 被点击slide的中心点
						mySwiper.setTransition(300)
						if (slideCenter < swiperWidth / 2) {
							mySwiper.setTranslate(0)
						} else if (slideCenter > maxWidth) {
							mySwiper.setTranslate(maxTranslate)
						} else {
							nowTlanslate = slideCenter - swiperWidth / 2
							mySwiper.setTranslate(-nowTlanslate)
						}
						$("#topNav  .active").removeClass('active')
						$("#topNav .swiper-slide").eq(mySwiper.clickedIndex).addClass('active')
					}
				}
			});
	</script>
</body>
</html>

2.3效果

3. 说明

3.1 地址：https://segmentfault.com/q/1010000009997299/

3.2 地址： https://www.sucaihuo.com/js/2249.html

3.3 小程序效果：https://blog.youkuaiyun.com/hangGe0111/article/details/101014033

android 横向滚动 导航,仿今日头条横向滚动导航栏--原生js
weixin_26795617的博客
05-26 801
咳咳！先打一波小广告，在上一篇里忘记了，那啥……我的那个个人博客做好了-->(我的博客)好嘞，言归正传，说说我们的效果。其实就是实现横向滑动，进行选择。原理：鼠标按下，获取当前鼠标坐标，作为起始坐标；鼠标移动，获取坐标，与起始坐标进行一系列的数学运算；给 left 赋值，改变位置；移动过多，超过时进行处理。function scrollTabX() {let nav = document.g...
纯jq仿今日头条导航栏
小明的博客
11-17 6082
几经改版啊，终于做出来个像样的 Document *{margin: 0; padding: 0; box-sizing: border-box; } html,body{width: 100%; overflow: hidden; } ul{width: 400%; display: flex; list-style: none; } li{flex:auto
js实现左右滑动的导航菜单，仿今日头条顶部菜单
热门推荐
包子源的博客
11-20 1万+
menu body{padding: 0;margin: 0} .swiper-slide{width: auto!important;} .topmenu{height: 35px;background-color: white;border-bottom: 1px solid #CCCCCC;padding: 0 1
仿今日头条顶部导航栏效果
01-06
随着时间的推移现在的软件要求显示的内容越来越多，所以要在小的屏幕上能够更好的显示更多的内容，首先我们会想到底部菜单栏，但是有时候像今日头条新闻客户端要显示的内容太多，而且又想在主界面全部显示出来，所以有加了顶部导航栏。
仿今日头条app手机端顶部触屏滑动导航
weixin_30508309的博客
04-29 550
swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maxi...
Android仿今日头条和知乎等App顶部滑动导航实现代码分析及源码下载
凡梦
10-31 4570
一、本文所涉及到的知识点 源码下载 二、目标 通过利用ViewPager+FragmentStatePagerAdapter+TabLayout 实现顶部滑动效果，如图： 三、知识点讲解 1、ViewPager 是Android库中自带的一个控件，可以实现屏幕间的切换，是个容器类，继承自ViewGroup。一般和PageAdapter或者其子类配合使用进行view切换。比
html滑动按钮源代码,js实现仿APP触摸滑动菜单Slideout.js
weixin_35849711的博客
06-08 309
Slideout.js是使用js实现仿APP触摸滑动菜单,实现类似本地化APP运用效果，支持树型格式化菜单，本地化滚动，自定义样式，CSS3动画切换效果。 浏览器兼容性： Chrome (IOS, Android, desktop) Firefox (Android, desktop) Safari (IOS, Android, desktop) Opera (desktop) IE 10+ (d...
仿今日头条微信小程序
07-23
仿今日头条小程序实现导航栏滑动，底部标签栏，窗口二级内容显示。
仿今日头条app web 页面
07-31
仿今日头条写的web端页面，点击下面评论及回复弹出隐藏的多文本输入框，点击查看全部回复展示侧滑页面，显示全部评论信息
JS仿淘宝网顶部的导航菜单
weixin_30466421的博客
07-07 865
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
今日头条H5
07-20
今日头条H5，移动端demo，HTML5。 今日头条H5，移动端demo，HTML5。
Android仿微信底部菜单栏+今日头条顶部导航栏
10-16
在Android中实现两种主要的Tab效果： 1. 仿微信底部菜单；2. 仿今日头条顶部导航条。博客讲解见：https://blog.youkuaiyun.com/ahuyangdong/article/details/82493158。github源码：https://github.com/ahuyangdong/TabCustom
新闻头条的导航栏拖拽实现
05-30
实现今日头条的topNav导航栏的手滑拖拽，适用于各类型的导航栏。
顶部导航栏可滑动可点击，仿微信仿豆瓣
09-13
顶部导航栏可滑动可点击，仿微信仿豆瓣的示例代码，有什么问题请在http://blog.youkuaiyun.com/qq347198688/article/details/52528485查看并联系我。
模仿今日头条导航栏滑动显示更多
weixin_30781433的博客
10-31 225
html： 1 <div class="subNav"> 2 <a href="javascript:void(0)" class="floatR subNav_choose"><span></span></a> 3 <div class="subNav_menu"> 4 ...
仿今日头条横向滚动导航栏--原生js
weixin_30273763的博客
03-20 1056
咳咳！先打一波小广告，在上一篇里忘记了，那啥……我的那个个人博客做好了-->(我的博客)<--。嘿嘿 好嘞，言归正传，说说我们的效果。 其实就是实现横向滑动，进行选择。 原理： 鼠标按下，获取当前鼠标坐标，作为起始坐标； 鼠标移动，获取坐标，与起始坐标进行一系列的数学运算； 给 left 赋值，改变位置； 移动过多，超过时进行处理。 function scr...
移动端滑动导航条
背着电脑走江湖的博客
12-13 505
HTML &lt;div class="tab"&gt; &lt;div class="table-item"&gt; &lt;p&gt;二维码&lt;/p&gt; &lt;p&gt;10&lt;/p&gt; &lt;/div&gt; &lt;div class="table-item"&am
html仿今日头条下拉刷新,小程序 仿今日头条 带滑动切换的文章列表
weixin_35037351的博客
06-05 431
小程序 仿今日头条 带滑动切换的文章列表发布时间：2018-07-19 09:41,浏览次数：353拿别人仿今日头条的代码做的改版，首先感谢前辈。其次，这个代码虽然能用，但是js里还是存在一些BUG。希望后辈再做改版。wxml： scroll-x="true" scroll-left="{{scrollNavbarLeft}}"> wx:for="{{navbarShowIndexArra...
Android实现今日头条顶部导航栏效果
"Android仿今日头条顶部导航栏效果的实例代码，包括实现原理和代码细节，旨在帮助开发者创建类似功能的导航栏。" 在Android开发中，为了提供更丰富的用户体验，尤其是在移动设备上显示大量内容，开发者经常需要设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值