jquery实现滑动楼梯效果

最新推荐文章于 2020-04-06 17:49:33 发布

Zhang_xiao_pang

最新推荐文章于 2020-04-06 17:49:33 发布

阅读量328

点赞数

文章标签： jquerys实现楼梯效果

本文链接：https://blog.csdn.net/Zhang_xiao_pang/article/details/101421002

版权

jquery实现滑动楼梯效果
思路鼠标滚动的时候页面跟随变化
点击模块时候实现指哪打哪效果
代码的实现
1.html和css代码

`<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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{
				
			}
			#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>
		
	</body>`

2.接下来进行引入一个 jQuery 文件然后进行jQuery代码的编写

<script>
		$(function(){

			//定义判别
			var flag = true
	
		$(window).scroll(function(){

			if(flag){
			//显示隐藏的楼梯
			var scrollTop=$(this).scrollTop();
			if(scrollTop>=500){
				$("#floorNav").fadeIn()
			} else{
				$("#floorNav").fadeOut();
			}

			//指哪打哪
			$("#content li").each(function(){
				if(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
					var index = $(this).index();
					$("#floorNav li").eq(index).addClass("hover")
					.siblings().removeClass("hover")
				}

			})
		 }
		})
	
		//点击的时候滚动条滚动到相应的位置
		$("#floorNav li:not(:last)").click(function(){
			flag=false
			var index = $(this).index();
			$("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
		
			flag=true
			$(this).addClass("hover").siblings().removeClass("hover")
		})
	
			$("#floorNav li:last").click(function(){
				flag = false;
				$("html,body").animate({"scrollTop":0},200,function(){
					flag = true
				})
			})
	})
	
	</script>