jQuery实现楼层联动

最新推荐文章于 2021-08-06 05:44:22 发布

贰年级小明

最新推荐文章于 2021-08-06 05:44:22 发布

阅读量170

点赞数 1

分类专栏： javaScript 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43735788/article/details/84373174

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、复制代码并运行，即可显示效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 路径采用百度CDN -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
	*{
		margin: 0;
		padding: 0;
		font-size:12px;
	}
	ul{
		list-style:none;
	}
	.floorNav{
		width:30px;
		height:auto;
		border:1px solid #ccc;
		position:fixed;
		top:100px;
		left:30px;
	}
	.floorNav li{
		width:30px;
		height:30px;
		line-height:30px;
		text-align:center;
		position:relative;
		border-bottom:1px solid #ccc;
	}
	.floorNav li.hover span{
		display:block;
		background: #f30;
		color:#fff;
	}
	.last{
		border:none;
		background: #f30;
		color:#fff;
	}
	.floorNav li span{
		width:30px;
		height:30px;
		display:none;
		position:absolute;
		top:0;left:0;
		background: #f30;
		color:#fff;
	}
	.floorNav li span.active{
		display:block;
		background: #fff;
		color:#f00;
	}
	.floorNav li.hover span.active{
		background: #f30;
		color:#fff;
	}
	#header,#footer{
		width:800px;
		height:1000px;
		margin:0 auto;
		background: #ff7;
	}
	#main{
		width:800px;
		height:auto;
		margin:0 auto;
	}
	#main .floor{
		width:800px;
		height:600px;
		line-height:600px;
		text-align:center;
		font-size:50px;
	}
</style>
</head>
<body>
	<!-- 楼层导航 -->
	<ul class="floorNav">
		<li>1F<span>服饰</span></li>
		<li>2F<span>手机</span></li>
		<li>3F<span>数码</span></li>
		<li>4F<span>家电</span></li>
		<li>5F<span>美妆</span></li>
		<li>6F<span>户外</span></li>
		<li class="last">Top</li>
	</ul>
	<!-- 楼层开始 -->
	<div id="header"></div>
	<div id="main">
		<div class="floor" style="background: #f34;">服饰</div>
		<div class="floor" style="background: #f0f;">手机</div>
		<div class="floor" style="background: #345;">数码</div>
		<div class="floor" style="background: #987;">家电</div>
		<div class="floor" style="background: #a6b;">美妆</div>
		<div class="floor" style="background: #0f9;">户外</div>
	</div>
	<div id="footer"></div>
<script>
	//添加鼠标滑过事件
	$('.floorNav li').not(":last").bind({
		"mouseover":function(){
			$(this).addClass('hover');
		},
		"mouseout":function(){
			$(this).removeClass('hover')
		},
		"click":function(){
			//获取当前li的下标
			var index = $(this).index();
			var sT = $(".floor").eq(index).offset().top;
			$('html,body').stop().animate({"scrollTop":sT});
			$(this).find('span').addClass('active');
			$(this).siblings().find('span').removeClass('active');
		}
	});
	//楼层滚动事件
	$(window).scroll(function(){
		var sT = $(this).scrollTop();
		$('.floor').each(function(index,ele){
			var _top = $(ele).offset().top;
			var fH = $(ele).height()/2;
			if(sT-_top >= -fH && sT-_top <= fH){
				$(".floorNav li").not(":last").find('span').removeClass('active');
				$(".floorNav li").eq(index).find("span").addClass('active');
			}
		})	
	})
</script>
</body>
</html>