<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
html,body{
100%;
height:100%;
}
ul{
100%;
height:100%;
}
ul li{
100%;
height:100%;
}
ol{
position:fixed;
top:30px;
left:30px;
}
ol li{
border:1px solid black;
50px;
height:30px;
text-align:center;
line-height:30px;
}
</style>
<script type="text/javascript" src="my.js"></script>
</head>
<body>
<ul id="ul">
<li>首页</li>
<li>体育</li>
<li>财经</li>
<li>新闻</li>
<li>关注</li>
</ul>
<ol id="ol">
<li>首页</li>
<li>体育</li>
<li>财经</li>
<li>新闻</li>
<li>关注</li>
</ol>
</body>
</html>
<script>
var ul=$id("ul");
var ol=$id("ol");
var ullis=ul.children;
var ollis=ol.children;
var color=["gray","orange","green","blue","pink"];
var leader=0,target=0,timer=null;
for(var i=0;i<ullis.length;i++)
{
ullis[i].style.backgroundColor=color[i];
ollis[i].style.backgroundColor=color[i];
ollis[i].index=i; //记录所点击的li的序列号，相应序列号的ul滑动到指定坐标
ollis[i].onclick=function ()
{
target=ullis[this.index].offsetTop; //相应序列号的ul的目标位置就是该ul的offsetTop值
clearInterval(timer);
timer=setInterval(function () {
leader=leader+(target-leader)/10;
// pic.sytle.left=leader+"px"; //这个是某个元素做动画
window.scrollTo(0,leader); //这是整个页面做动画，滑动到指定坐标
},30)
}
}
</script>