JQuery实现导航栏下拉

最新推荐文章于 2024-04-28 13:46:58 发布

weixin_51747920

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量551

点赞数 1

分类专栏：实训笔记文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_51747920/article/details/131505513

版权

实训笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要求：通过JQuery实现导航栏下拉显示与隐藏、登录按钮缩放效果。

JQuery实现导航栏下拉

实现思路

我们可以通过fadeIn( )和fadeOut( )方法（淡入、淡出）来显示和隐藏元素。对于按钮的缩放，我们可以先获取元素的实际宽、高，然后再对宽、高的值进行比例调节，最后设置给相应的元素。

小知识

width( )方法

JQuery中width( ) 方法设置或返回被选元素的宽度。

返回宽度：$(selector).width( )；
设置宽度：$(selector).width(value)。

JQuery设置CSS属性的格式

<script>
		//设置单个CSS属性
		$("button").css("color", "BlueViolet");
		//设置多个CSS属性
		$("button").css({
			"width": "150px",
			"height": "60px",
			"background-color": "skyblue"
		})
</script>

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery实现导航栏下拉</title>
		<script src="js/jquery.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body {
				background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);;
			}
			.header {
				width: 1100px;
				height: 60px;
				margin: 0 auto;
				/* margin: 0 auto;此处不生效，是因为浮动元素脱离了普通文档流 */
				border-radius: 30px;
				background-color: aliceblue;
				margin-top: 260px;
			}
			/* 为了使导航里面的多个浮动元素实现水平居中，我选择在浮动元素外层嵌套了一个div，并使这个div的宽度为浮动元素的宽度之和！！！ */
			.content {
				width: 1000px; /* 200*4=800 */
				margin: 0 auto;
			}
			a {
				text-decoration: none;
				font-size: 20px;
				color: #333;
			}
			ul li {
				float: left;
				width: 200px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				list-style: none;
			}
			.btn {
				width: 110px;
				height: 40px;
				margin-top: 10px;
				margin-left: 75px;
				font-size: 16px;
				border-radius: 20px;
				background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			}
			.box {
				display: none;
			}
			.box li {
				background-color: #c2e9fb;
				/* background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
			}
			.box li:hover {
				background-color: #a1c4fd;
				color: #333;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="content">
				<ul id="nav">
					<li><a href="">首页</a></li>
					<li><a href="">市场</a></li>
					<li>
						<a href="">课程</a>
						<ul class="box">
							<li><a href="">HTML/CSS</a></li>
							<li><a href="">JS</a></li>
							<li><a href="">Java</a></li>
						</ul>
					</li>
					<li>
						<a href="">更多</a>
						<ul class="box">
							<li><a href="">了解我们</a></li>
							<li><a href="">立即加入</a></li>
						</ul>
					</li>
					
					<button class="btn">登录</button>
				</ul>
				
			</div>
		</div>
		
		<script>
			$("#nav>li").hover(function() {
				$(this).children("a").css("color", "BlueViolet");
				$(this).children("ul").fadeIn(800); 
			},
			function() {
				$(this).children("a").css("color", "#333");
				$(this).children("ul").fadeOut(500);
			})
			
			var btn = $("button")
			var btnWidth = btn.width(); //获取图片的实际宽度
			var btnHeight = btn.height(); //获取图片的实际高度
			$("button").hover(function() {
				$(this).animate({fontSize: "20px"});
				btn.width(btnWidth*1.1);
				btn.height(btnHeight*1.1);
			},
			function(){
				$(this).animate({fontSize: "16px"});
				btn.width(btnWidth);
				btn.height(btnHeight);
			})
		</script>
	</body>
</html>