@jQuery版楼层效果

最新推荐文章于 2023-04-26 16:58:34 发布

胖胖的码农

最新推荐文章于 2023-04-26 16:58:34 发布

阅读量190

点赞数

分类专栏：备忘文章标签： jQuery 实用

本文链接：https://blog.csdn.net/weixin_43777346/article/details/84380809

版权

备忘专栏收录该内容

4 篇文章 0 订阅

订阅专栏

@jQuery版楼层效果
这是一个基于jQuery的楼层（网站定位导航）效果，啥也不多说直接上源码?
样式代码：

 <style>
    	*{
    	    margin: 0;
    		padding: 0;
    		}
    		ul{
    		list-style:none;
    	}
    	.floorNav{
    		width:30px;
    		height:auto;
    		border:1px solid #ddd;
    		position:fixed;
    		top:150px;
    		left:50px;
    		display:none;
    	}
    	.floorNav li{
    		width:30px;
    		height:30px;
    		border-bottom:1px solid #ddd;
    		line-height:30px;
    		text-align:center;
    		position:relative;
    		font-size:12px;
    		cursor:pointer;
    	} 
    	.floorNav li span{
    		width:30px;
    		height:30px;
    		background: #f00;
    		color:#fff;
    		position:absolute;
    		left:0;
    		top:0;
    		display:none;
    	}
    	.floorNav li.hover span{
    		display:block;
    	}
    	.floorNav li.hover span.active{
    		background: #f00;
    		color:#fff;
    	}
    	.floorNav li span.active{
    		background: #fff;
    		color:#f00;
    		display:block;
    	}
    	.floorNav li.last{
    		background: #f00;
    		color:#Fff;
    		border-bottom:none;
    	}
    	#header{
    		width:800px;
    		height:1000px;
    		background: #2af;
    		margin:0 auto;
    		font-size:50px;
    		line-height:1000px;
    		text-align:center;
    	}
    	#main .floor{
    		width:800px;
    		height:600px;
    		line-height:600px;
    		text-align:center;
    		color:#fff;
    		margin:0 auto;
    		font-size:100px;
    	}
    	#footer{
    		width:800px;
    		height:400px;
    		background: #f00;
    		margin:0 auto;
    	}
 </style>

布局结构：

<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>7F<span>居家</span></li>
		<li>8F<span>母婴</span></li>
		<li>9F<span>服务</span></li>
		<li>10F<span>零食</span></li>
		<li>11F<span>户外</span></li>
		<li class="last">Top</li>
	</ul>
	<!-- 楼层 -->
	<div id="header">头部</div>
	<div id="main">
		<div class="floor" style="background:#456">服饰</div>
		<div class="floor" style="background:#f9e">美妆</div>
		<div class="floor" style="background:#e33">运动</div>
		<div class="floor" style="background:#ab3">数码</div>
		<div class="floor" style="background:#c56">家电</div>
		<div class="floor" style="background:#ff3">手机</div>
		<div class="floor" style="background:#a2f">居家</div>
		<div class="floor" style="background:#b3b">母婴</div>
		<div class="floor" style="background:#78c">服务</div>
		<div class="floor" style="background:#0fd">零食</div>
		<div class="floor" style="background:#0c9">户外</div>
	</div>
	<div id="footer"></div>
</body>

下面就是重头戏啦！
js逻辑代码：

<script src="这里自己引入在线或本地的jQuery库"></script>
<script>
	// 这里是侧边栏的hover效果实现
	$('.floorNav li').not(':last').hover(function(){
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("hover"); 
	});
	
	// 这里是点击侧边栏到对应楼侧的效果实现
	$('.floorNav li').not(':last').click(function(){
		//找点击元素的下标
		var $index = $(this).index();
		//获取右边对应块距离文档顶部的距离
		var $fTop = $(".floor").eq($index).offset().top;
		// console.log($fTop);
		// 设置文档的滚动高度为对应块句距离文档顶部的距离
		$('html,body').stop().animate({"scrollTop":$fTop},1000);
		$('.floorNav li').find("span").removeClass("active");
		$(this).find('span').addClass('active');
	 })

	// 下面是滚动楼层对应侧边栏加样式的效果
	// 获取头部的高度
	var $top = $('#header').height();
	$(window).scroll(function(){
		var arr=[];
		var $sTop = $(this).scrollTop();
		$('#main .floor').each(function(index,element){
			var $height =$(element).offset().top + $(element).height()/2;
			if($sTop<$height){
				// console.log(index);
				arr.push(index);
			}
		})
		// console.log(arr);
		var _index = arr[0];
		$('.floorNav li').find("span").removeClass("active");
		$('.floorNav li').eq(_index).find('span').addClass('active');

		if($sTop>=$top){
			$('.floorNav').fadeIn();
		}else{
			$('.floorNav').fadeOut();
		}
		
	});

	// 这里是返回顶部效果实现
	$(".last").click(function(){
		$('html,body').animate({"scrollTop":0})
	})
</script>

不喜勿喷，欢迎提宝贵意见！谢谢！