原生js实现导航条动画_h5 毛毛虫导航-CSDN博客

本文链接：https://blog.csdn.net/weixin_48171107/article/details/116738995

原生js实现毛毛虫导航

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				position: relative;
				width: 700px;
				margin: 100px auto;
				padding: 20px;
				display: flex;
				justify-content: space-around;
				border: 1px solid aqua;
			}

			ul>li {
				list-style: none;
			}

			p {
				position: absolute;
				width: 40px;
				height: 6px;
				background: red;
				border-radius: 12px;
				bottom: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>加油骚年</li>
			<li>头脑清楚</li>
			<li>每天学习js巩固</li>
			<li>js永远的神</li>
			<li>太喜欢js了</li>
			<li>敲js代码使自己快乐</li>
			<p></p>
		</ul>

	</body>
</html>


<script type="text/javascript">
	var li = document.querySelectorAll('li')
	var p = document.querySelectorAll('p')
	
	//点击改变
	for (var i = 0; i < li.length; i++) {
		li[i].addEventListener('click', function(e) {
			p[0].style.left = (this.offsetLeft + this.offsetWidth / 2 - p[0].offsetWidth / 2) + 'px' //计算滑块位置
			//点击获取当前li的位置然后赋值给下面滑块
			p[0].style.transition = 'all 0.3s'
			//设置过渡动画效果
			
		})
	}
	
	//首次加载让滑块去第一个li下面
	(function fn() {
		p[0].style.left = (li[0].offsetLeft + li[0].offsetWidth / 2 - p[0].offsetWidth / 2) + 'px'
	})()
</script>