使用jq实现电商网站“楼梯”效果制作（左侧显示楼层号、显示对应楼层信息）

￡神魔★判官ぃ 2021-12-21 13:03 275阅读 0赞

## 使用jq实现电商网站“楼梯”效果制作 ##

思路 ：  
1、点击左侧的楼层号 显示对应的楼层信息  
操作当前点击的楼层号的高亮显示  
点击不同楼层号 设置页面滚走的距离 为当前楼层距离内容窗口的top值  
2、点击 top 回到顶部  
3、操作滚动条显示对应的楼层号  
4、技术点：滚动条的获取、页面滚走的距离、jq操作样式、对应下标显示楼层内容（在代码中我都会详细注释）

//代码分享

<!DOCTYPE html>
    <html>
        	<head>
        		<meta charset="utf-8" />
        		<title></title>
        		<style type="text/css">
        			* {
        				margin: 0;
        				padding: 0;
        			}
        			#LoutiNav{
        				
        				position: fixed;
        				top: 25%;
        				left: 40px;
        				width:30px;
        				border: 1px solid ;
        			}
        			#LoutiNav ul li{
        				position:relative;
        				width:30px;
        				height:30px;
        				list-style:none;
        				text-align:center;
        				line-height: 30px;
        				font-size: 12px;
        				cursor: pointer;
        				border-bottom: 1px dotted #AAAAAA;
        			}
        			#LoutiNav ul li.last {
        				background: darkred;
        				color: white;
        				border-bottom: none;
        			}
        			#LoutiNav ul li span{
        				display: none;
        				width:30px;
        				height: 30px;
        				position: absolute;	
        				top: 0;
        				left: 0;
        				color:red;
        			}
        			#LoutiNav ul li:hover span{
        				display: block;
        				background: darkred;
        				color: white;
        			}
        			#LoutiNav ul li span.active {
        				display: block;
        				background: white;
        				color: red;
        			}
        			#LoutiNav ul li:hover span.active{
        				display: block;
        				background: darkred;
        				color: white;
        			}
        			#header,#main,#footer {
        				margin: auto;
        				width: 1000px;
        				text-align: center;
        				font-size: 40px;
        				font-weight: bold;
        				line-height: 500px;
        			}
        			
        			#main div{
        				height: 700px;
        				font-size: 50px;
        				color: honeydew;
        				line-height: 700px;
        			}
        			
        			#header{
        				height: 500px;
        				background: darkcyan;
        			}
        			#footer{
        				height: 500px;
        				background: darkcyan;
        			}
        	
        		</style>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        	</head>
        
        	<body>
        		
        		<div id="LoutiNav">
        			<ul>
        				
        				<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>
        		
        		<div id="header">头部</div>
        		<div id="main">
        			
        			<div class="Louti" style="background: #cc0033;">服饰</div>
        			<div class="Louti" style="background: #999933;">美妆</div>
        			<div class="Louti" style="background: #ccff33;">手机</div>
        			<div class="Louti" style="background: #006633;">家电</div>
        			<div class="Louti" style="background: #6666cc;">数码</div>
        			<div class="Louti" style="background: #ff6600;">运动</div>
        			<div class="Louti" style="background: #ffcc00;">居家</div>
        			<div class="Louti" style="background: #3333ff;">母婴</div>
        			<div class="Louti" style="background: #ff00cc;">食品</div>
        			<div class="Louti" style="background: #669900;">图书</div>
        			<div class="Louti" style="background: #ff66cc;">服务</div>
        		</div>
        		<div id="footer">尾部</div>
        		
        
        	</body>
        </html>
        <script type="text/javascript">
        	//使用jq获取各个元素
        	let  $list = $("#LoutiNav li:not(.last)");//楼层号
        	let  $topLi = $(".last");//回调顶部
        	let  $floorDiv = $(".Louti");//楼层
        	let flag = true;//假设值为true时  滚动条可以被操作
        	$list.click(function(){//给楼梯设置点击事件
        		flag = false;		/点击时，滚动条不可以被操作
        		//使用jq改变当前的li的样式
        		$(this).find("span")
        			   .addClass( "active" )    //给当前所有li下面的span的标签增加样式
        			   .end()
        			   .siblings()
        			   .find("span")
        			   .removeClass( "active" );//给其余所有li下面的span标签删除样式
        			   
        		//获取当前操作的楼层号的下标
        		let index = $(this).index();
        		//根据下标获取对应的楼层
        		let $floor = $floorDiv.eq( index );
        		//获取该楼层相对于body的距离
        		let bTop = $floor.offset().top;
        		
        		//设置页面滚走的距离 为 bTop
        		$("body,html").animate( { scrollTop : bTop } , 1000 , function(){
        			flag = true;
        		} );
        	})
        	
        	//回到顶部
        	$topLi.click(function(){
        		flag = false;
        		$("body,html").animate( { scrollTop : 0 } , 1000 , function(){
        			flag = true;
        		} );
        	})
        	
        	//操作滚动条显示对应的楼层号
        	$(window).scroll( function(){
        		if( flag ){
        			//获取页面滚走的距离
        			let sTop = $(document).scrollTop();
        		
        			//使用filter遍历每一个楼层 并返回满足某个条件的楼层
        			// 条件: 某个楼层距离body的top值 - 页面滚走的距离 <　楼层高度/2
        			let $fDiv = $floorDiv.filter( function(index){
        				return Math.abs( $(this).offset().top - sTop ) < $(this).height()/2;
        			} )
        		
        			//获取当前在可视区中高度最高的楼层的下标
        			let index = $fDiv.index();
        			console.log(index)
        			if( index != -1 ){
        				//根据下标找到对应要高亮显示的楼层号
        				$list.eq(index).find("span")
        							   .addClass("active")
        							   .end()
        							   .siblings()
        							   .find("span")
        							   .removeClass("active");
        			}
        			if( sTop < 100 || sTop > ($floorDiv.eq(10).offset().top + 300) ){
        				$list.find("span").removeClass("active");
        			}
        		}
        	} )
        </script>

![效果展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211220/7c468915169b4226adc0fb7cec0977c7.png