jq 超简单跳楼效果解析

最新推荐文章于 2022-06-25 17:03:50 发布

weixin_34110749

最新推荐文章于 2022-06-25 17:03:50 发布

阅读量123

点赞数

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5307811.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{ margin: 0; padding: 0;}
			.list_li{ position: fixed; left: 20px; top: 50%;list-style: none;}
			.list_li li{ width: 20px; height: 20px; border: 1px solid red; }
		</style>
		<script src="js/jquery-2.2.1.min.js"></script>
		<script>
			$(function(){
				$(".list_li").hide();//先让li列表隐藏
				var headTop =$(".head").outerHeight() ;//获取1楼的高度
				$(window).scroll(function(){
					if( $(window).scrollTop() >= headTop  )//判断如果滚动的高度大于1楼的高度 li列表显示
					{
						$(".list_li").show(500);
					}
				})
				
				//跳楼
				$(".list_li >li").click(function(){
					var index = $(this).index();//取到对应li的下标
					
					var oTop = $("div").eq(index).offset().top;//每个对应div 距离顶部的高度
					
					$("body").animate({scrollTop:oTop},1000)//控制body滚动动画
				})
			})
		</script>
	</head>
	<body>
		<div class="head" style="height: 400px; width: 800px; margin: 0 auto; background: red;">一楼</div>
		<div class="head2" style="height: 200px; width: 800px; margin: 0 auto; background: blue;">二楼</div>
		<div style="height: 300px; width: 800px; margin: 0 auto; background: pink;">三楼</div>
		<div style="height: 500px; width: 800px; margin: 0 auto; background: green;">四楼</div>
		<div style="height: 100px; width: 800px; margin: 0 auto; background: blueviolet;">五楼</div>
		<div style="height: 700px; width: 800px; margin: 0 auto; background: orange;">六楼</div>
		<div style="height: 300px; width: 800px; margin: 0 auto; background: palegreen;">七楼</div>
		<div style="height: 900px; width: 800px; margin: 0 auto; background: saddlebrown;">八楼</div>
		<div style="height: 600px; width: 800px; margin: 0 auto; background: darkblue;">九楼</div>
		
		<ul class="list_li">
			<li>1F</li>
			<li>2F</li>
			<li>3F</li>
			<li>4F</li>
			<li>5F</li>
			<li>6F</li>
			<li>7F</li>
			<li>8F</li>
			<li>9F</li>
		</ul>
	</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5307811.html