js +css3 实现水平导航，垂直导航线条跟随鼠标移动动画。

最新推荐文章于 2021-08-03 21:06:57 发布

能c能v

最新推荐文章于 2021-08-03 21:06:57 发布

阅读量720

点赞数

分类专栏： JavaScript 原创

本文链接：https://blog.youkuaiyun.com/qq_43391160/article/details/103290842

版权

原创同时被 2 个专栏收录

51 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

1.样式不重要，重要的是怎么实现，主要涉及mouseover，mouseleave鼠标移入移出事件，移入的时候线条display为block，移出时为none，在css里面加 transition: all .3s; 实现一个动画过渡的效果，线条会根据内容改变自己的宽度和高度。

horizontalLine.style.width = target.offsetWidth + 'px';

slideLine.style.height=target.offsetHeight+'px'

2.放图，你们自己看吧。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{
				margin-top: 50px;
			}
			.nav {
				position: relative;
				margin: 0 auto;
			}
			.slide .nav{
				width: 100px;
			}
			.horizontal{
				width: 500px;
				margin: 0 auto;
			}

		.horizontal .nav li {
				display: inline-block;
				margin-right: 20px;
			}
			.slide li{
				list-style: none;
				width: 100px;
				text-align: left;
				margin-top: 20px;
			}
			.nav li a {
				text-decoration: none;
				color: #333;
			}

			.horizontal .line {
				display: none;
				position: absolute;
				width: 32px;
				height: 2px;
				bottom: 0;
				background: #333;
				transition: all .3s;
			}
			.slide .line{
				width: 2px;
				position: absolute;
				right: 0;
				background: #333;
				transition: all .3s;
			}
		</style>
	</head>
	<body>
		<!-- 水平 -->
		<div class="horizontal">
			<ul class="nav">
				<li><a href="javascript:;">首页</a></li>
				<li><a href="javascript:;">产品中心</a></li>
				<li><a href="javascript:;">关于我们</a></li>
				<li><a href="javascript:;">联系我们</a></li>
				<span class="line"></span>
			</ul>
		</div>
		<!-- 侧边 -->
		<div class="slide">
			<ul class="nav">
				<li><a href="javascript:;">首页</a></li>
				<li><a href="javascript:;">产品中心</a></li>
				<li><a href="javascript:;">关于我们</a></li>
				<li><a href="javascript:;">联系我们</a></li>
				<span class="line"></span>
			</ul>
		</div>
	</body>
</html>
<!-- <script src="js/jquery-3.4.1.js"></script> -->
<script type="text/javascript">
	// Native
	(function() {
		var horizontalNav = document.querySelector('.horizontal .nav');
		var slideNav = document.querySelector('.slide .nav');
		var	horizontalLine = horizontalNav.querySelector('.line');
		var	slideLine = slideNav.querySelector('.line');
		
		
			// 水平导航线条动画
		horizontalNav.addEventListener('mouseover', function(event) {
			var target = event.target;
			console.log(target.nodeName)
			if (target.nodeName == "LI" || target.nodeName == "A") {
				horizontalLine.style.left = target.offsetLeft + 'px';
				horizontalLine.style.display = 'block'
				horizontalLine.style.width = target.offsetWidth + 'px';
			} else {
				horizontalNav.addEventListener('mouseleave', function() {
					horizontalLine.style.display = 'none'
				})
			}
		});
		
		// 侧边导航线图
		slideNav.addEventListener('mouseover', function(event) {
			var target = event.target;
			console.log(target.nodeName)
			if (target.nodeName == "LI" || target.nodeName == "A") {
				slideLine.style.top = target.offsetTop + 'px';
				slideLine.style.display = 'block'
				slideLine.style.height=target.offsetHeight+'px'
			} else {
				slideNav.addEventListener('mouseleave', function() {
					slideLine.style.display = 'none'
				})
			}
		});
		
		
	})();
</script>