欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS楼层跳跃代码实现

程序员文章站 2022-04-19 10:27:32
js楼层跳跃代码实现

js楼层跳跃代码实现

 	<!doctype html>
 	<html>
 	<head lang="en">
 	<meta charset="utf-8">
 	<title></title>
 	<style>
 	* {
 	margin: 0;
 	padding: 0;
 	}
 	body,html {
 	height: 100%;
 	}
 	ul {
 	list-style: none;
 	height: 100%;
 	}
 	ul li {
 	height: 100%;
 	}
 	ol {
 	list-style: none;
 	position: fixed;
 	top: 80px;
 	left: 50px;
 	}
 	ol li {
 	width: 50px;
 	height: 50px;
 	border: 1px solid #000;
 	text-align: center;
 	line-height: 50px;
 	margin-top: -1px;
 	cursor: pointer;
 	}
 	</style>
 	</head>
 	<body>
 	<ul>
 	<li>鞋子区域</li>
 	<li>袜子区域</li>
 	<li>裤子区域</li>
 	<li>裙子区域</li>
 	<li>帽子区域</li>
 	</ul>
 	<ol>
 	<li>鞋子</li>
 	<li>袜子</li>
 	<li>裤子</li>
 	<li>裙子</li>
 	<li>帽子</li>
 	</ol>
 	 
 	<script src="animate.js"></script>
 	<script>
 	//需求:点击ol中的li,屏幕滑动到对应的ul中的li的范围。
 	//思路:还是利用window.scrollto();利用缓动动画原理实现屏幕滑动。
 	//步骤:
 	//0.获取元素
 	//1.指定ul和ol中的li的背景色,对应的li背景色相同
 	//2.老三步。(获取元素并绑定事件)
 	//3.利用缓动动画原理实现屏幕滑动
 	//4.用scroll事件模拟盒子距离最顶端的距离。
 	 
 	//0.获取元素
 	var ul = document.getelementsbytagname("ul")[0];
 	var ol = document.getelementsbytagname("ol")[0];
 	var ulliarr = ul.children;
 	var olliarr = ol.children;
 	var target = 0;var leader = 0;var timer = null;
 	//1.指定ul和ol中的li的背景色,对应的li背景色相同
 	//设置一个数组,里面装颜色,然指定的颜色给数组中的指定元素
 	var arrcolor = ["pink","blue","yellow","orange","green"];
 	//利用for循环给两个数组的元素上色
 	for(var i=0;i<arrcolor.length;i++){
 	//上色
 	ulliarr[i].style.backgroundcolor = arrcolor[i];
 	olliarr[i].style.backgroundcolor = arrcolor[i];
 	 
 	 
 	//属性绑定索引值
 	olliarr[i].index = i;
 	//2.老三步。(并绑定事件)循环绑定,为每一个li绑定点击事件
 	olliarr[i].onclick = function () {
 	//***获取目标位置
 	//获取索引值。
 	target = ulliarr[this.index].offsettop;
 	 
 	//要用定时器,先清除定时器
 	clearinterval(timer);
 	//3.利用缓动动画原理实现屏幕滑动
 	timer = setinterval(function () {
 	//(1).获取步长
 	var step = (target-leader)/10;
 	//(2).二次处理步长
 	step = step>0?math.ceil(step):math.floor(step);
 	//(3).屏幕滑动
 	leader = leader + step;
 	window.scrollto(0,leader);
 	//(4).清除定时器
 	if(math.abs(target-leader)<=math.abs(step)){
 	window.scrollto(0,target);
 	clearinterval(timer);
 	}
 	},25);
 	}
 	}
 	 
 	//4.用scroll事件模拟盒子距离最顶端的距离。
 	window.onscroll = function () {
 	//每次屏幕滑动,把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
 	leader = scroll().top;
 	}
 	 
 	</script>
 	 
 	 
 	</body>
 	</html>