1.前端页面布局
<!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 {
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>
2.javascript 封装动画
/*
* @Author: Administrator
* @Date: 2017-03-24 00:12:06
* @Last Modified by: Administrator
* @Last Modified time: 2017-03-24 00:25:47
*/
//动画基本设计
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-offsetTop)/10;
step=step>0?Math.ceil(step):Math.ceil(step);
ele.style.left=ele.offsetTop+step+"px";
if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
ele.style.left=target+"px";
clearInterval(timer);
}
},25)
}
//处理浏览器兼容
function scroll(){
if (window.pageYOffset!=null) {
return{
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode==="Css1compate") {
return{
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{
return{
left:document.body.scrollLeft,
top:document.bod.scrollTop
}
}
}