樓層跳躍.gif
<!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>鞋子區(qū)域</li>
<li>襪子區(qū)域</li>
<li>褲子區(qū)域</li>
<li>裙子區(qū)域</li>
<li>帽子區(qū)域</li>
</ul>
<ol>
<li>鞋子</li>
<li>襪子</li>
<li>褲子</li>
<li>裙子</li>
<li>帽子</li>
</ol>
<script src="animate.js"></script>
<script>
//需求：點擊ol中的li，屏幕滑動到對應(yīng)的ul中的li的范圍。
//思路：還是利用window.scrollTo();利用緩動動畫原理實現(xiàn)屏幕滑動。
//步驟：
//0.獲取元素
//1.指定ul和ol中的li的背景色，對應(yīng)的li背景色相同
//2.老三步。(獲取元素并綁定事件)
//3.利用緩動動畫原理實現(xiàn)屏幕滑動
//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的背景色，對應(yīng)的li背景色相同
//設(shè)置一個數(shù)組，里面裝顏色，然指定的顏色給數(shù)組中的指定元素
var arrColor = ["pink","blue","yellow","orange","green"];
//利用for循環(huán)給兩個數(shù)組的元素上色
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.老三步。(并綁定事件)循環(huán)綁定，為每一個li綁定點擊事件
olLiArr[i].onclick = function () {
//***獲取目標位置
//獲取索引值。
target = ulLiArr[this.index].offsetTop;
//要用定時器，先清除定時器
clearInterval(timer);
//3.利用緩動動畫原理實現(xiàn)屏幕滑動
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,模擬獲取顯示區(qū)域距離頂部的距離
leader = scroll().top;
}
</script>
</body>
</html>
