其他分享
首页 > 其他分享> > jQuery 实现楼梯滚动效果

jQuery 实现楼梯滚动效果

作者:互联网

楼梯滚动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>楼梯滚动效果</title>
		<script src="js/jquery-1.11.3.min.js"></script>
		<style type="text/css">
			body,ul,li{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			#floorNav{
				display: none;
				position: fixed;
				top: 100px;
				left: 50px;
				width: 32px;
				border: 1px solid #CECECE;
			}
			#floorNav li{
				position: relative;
				width: 32px;
				height: 32px;
				border-bottom: 1px solid #CECECE;
				text-align: center;
				line-height: 32px;
				font-size: 12px;
			}
			
			#floorNav span{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 32px;
				height: 32px;
				background: red;
				color: white;
			}
			
			#floorNav li:hover span,#floorNav li.hover span{
				display: block;
			}
			
			#floorNav li:last-child{
				background: red;
				color: white;
				border-bottom: none;
			}
			#header,#footer{
				width: 1000px;
				height: 1000px;
				background: darkgoldenrod;
				margin: 0 auto;
			}
			#content li{
				width:1000px;
				height: 600px;
				margin: 0 auto;
				font-size: 40px;
				text-align: center;
				line-height: 600px;
			}
		</style>
	</head>

	<body>
		<div id="floorNav">
			<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>TOP</li>
			</ul>
		</div>
		<div id="header"></div>
		<div id="content">
			<ul>
				<li style="background: #8B0000;">服饰</li>
				<li style="background: #123;">美妆</li>
				<li style="background: #667;">手机</li>
				<li style="background: #558;">家电</li>
				<li style="background: #900;">数码</li>
				<li style="background: #456;">运动</li>
				<li style="background: #789;">居家</li>
				<li style="background: #234;">母婴</li>
				<li style="background: #567;">食品</li>
				<li style="background: #887;">图书</li>
				<li style="background: #980;">服务</li>
			</ul>
		</div>
		<div id="footer"></div>
		
		<script type="text/javascript">
			$(function(){
				var flag = true;
			
			$(window).scroll(function(){
				if(flag){
				var st = $(this).scrollTop();
				if(st>300){
					$('#floorNav').fadeIn();
				}else{
					$('#floorNav').fadeOut();
				}
				
				$('#content li').each(function(i){
					if(st >= $(this).offset().top-$(this).outerHeight()/2){
						
						$('#floorNav li').eq(i).addClass('hover').siblings().removeClass('hover')
					}
				})
				
				}
				
			});
				$('#floorNav li:not(:last)').click(function(){
					flag = false;
					$(this).addClass('hover').siblings().removeClass('hover');
					var index = $(this).index();
					$('body,html').stop().animate({'scrollTop':$('#content li').eq(index).offset().top},800,function(){
						flag = true;
					});
				
			})
			
			$('#floorNav li:last').click(function(){
					flag = false;
				
				$('body,html').stop().animate({'scrollTop':0},800,function(){
					flag = false;
				});
				$('#floorNav').hide();
		
			})
		})	
			
		</script>
	</body>
</html>

标签:jQuery,function,hover,滚动,li,height,floorNav,楼梯,32px
来源: https://blog.csdn.net/weixin_46390620/article/details/104721258