楼梯效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {margin: 0; padding: 0; border: none;}
			ul, li {list-style: none;}
			#loutiNav {
				width: 30px;	
				position: fixed;
				left: 40px;
				top: 25%;
				border: 1px solid black;
			}
			#loutiNav li {
				width: 30px;
				height: 29px;
				border-bottom: 1px dashed white;
				text-align: center;
				line-height: 29px;
				font-size: 12px;
				position: relative;
				cursor: pointer;
			}
			#loutiNav li span {
				display: none;
				position: absolute;
				width: 30px;
				height: 29px;
				left: 0;
				top: 0;
				background: darkred;
			}
			#loutiNav li:hover span{
				display: block;
				color: white;
			}
			#loutiNav li span.active {
				display: block;
				background: white;
				color: darkred;
			}
			
			#head, #main div, #foot {
				width: 1000px;
				height: 600px;
				text-align: center;
				line-height: 600px;
				font-size: 100px;
				margin: 0 auto;
			}						
		</style>
		<script type="text/javascript" src="js/jquery-1.12.3.js" ></script>
		<script>
			$(function(){
				
				//点击楼层按钮,页面是否正在移动
				var isMoving = false;
				
				//点击楼层按钮
				$("#loutiNav li").click(function(){
					//改变按钮的选中状态
					$(this).find("span").addClass("active")
					       .parent().siblings().find("span").removeClass("active");
					
					//下标
					var index = $(this).index();
					var top = $(".louti").eq(index).offset().top;
					//$(window).scrollTop(top);
					isMoving = true;
					$("html, body").stop().animate({scrollTop:top}, 500, function(){
						isMoving = false;
					});
					
				})
				
				//scroll
				$(window).scroll(function(){
					
					if (isMoving == false) {
					
						var scrollTop = $(window).scrollTop();
						console.log(scrollTop);
						
						//遍历
						var index = 0;
						$(".louti").each(function(){
						  	var top = $(this).offset().top;
						  	
						  	if (scrollTop >= top){
						  		//console.log(top);
						  		index = $(this).index();
						  	}
						})
						//console.log(index);
						
						//改变楼梯按钮的选中状态
						$("#loutiNav li").eq(index).find("span").addClass("active")
						        .parent().siblings().find("span").removeClass("active");
					}
				})
				
			})
		</script>
	</head>
	<body>
		
		<div id="loutiNav">
			<ul>
				<li>1F<span class="active">服饰</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>
			</ul>
		</div>
		
		<div id="head" style="background: #008000;">头部</div>
		<div id="main">
			<div class="louti" style="background: #ABCDEF;">1F服饰</div>
			<div class="louti" style="background: #003366;">2F美妆</div>
			<div class="louti" style="background: #009988;">3F手机</div>
			<div class="louti" style="background: #776611;">4F家电</div>
			<div class="louti" style="background: #FF88FF;">5F数码</div>
			<div class="louti" style="background: #FF3333;">6F运动</div>
			<div class="louti" style="background: #60F043;">7F居家</div>
			<div class="louti" style="background: #00CCDD;">8F母婴</div>
			<div class="louti" style="background: #ABF0EF;">9F食品</div>
			<div class="louti" style="background: #F78787;">10F图书</div>
			<div class="louti" style="background: #666699;">11F服务</div>
		</div>
		<div id="foot" style="background: #008000;">底部</div>
		
		
	</body>
</html>

　　

posted @ 2018-02-04 23:41  \面朝阳光/  阅读(247)  评论(0)    收藏  举报