jquery导航菜单「建议收藏」

全栈程序员站长

发布于 2022-09-17 12:09:44

5.8K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

	*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 800px;
				overflow: hidden;
				background-color: #000000;
				position: relative;
				margin: 0 auto;
			}
			li{
				position: relative;
				z-index: 100;
				list-style: none;
				float: left;
				padding: 12px 24px;
				color: white;
				font-size: 16px;
			}
			/*悬浮的背景颜色*/
			.active{
				background-color: red;
			}
			#hoveract{
				position: absolute;
				width: 80px;
				height: 45px;
				background-color: red;
			}

<body>
		<ul>
			<li class="active">首页</li>
			<li>新闻</li>
			<li>社会新闻</li>
			<li>汽车</li>
			<li>家居</li>
			<li>社会新闻</li>
			<li>汽车</li>
			<li>家居</li>
			<div id="hoveract"></div>
		</ul>
	</body>

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("li").on("mouseover",function(){
			var whid=$(this).outerWidth()
			$('#hoveract').stop();
			$('#hoveract').animate({left:$(this).position().left,width:whid},'linear')
		})
		$("ul").on("mouseout",function(){
			$('#hoveract').stop();
			$('#hoveract').animate({left:0,width:$("li").eq(0).outerWidth()},'linear')
		})
	</script>