楼层跳跃

来源：互联网发布：足球战术设计软件编辑：程序博客网时间：2024/04/20 13:33

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
position: fixed;
top:200px;
left: 100px;
}
.nav li{
width: 70px;
height: 40px;
background: #666;
color:#fff;
font-size:14px;
text-align: center;
line-height: 40px;
cursor:pointer;
}
html,body{
height: 100%;
}
.content{
width: 100%;
height: 500%;
}
.nav li.now{
background: darkred;
}
.content li{
height: 20%;
text-align: center;
font:100px/200px "微软雅黑";
color: white;
}
</style>
</head>
<body>
<ul class="nav">
<li>享品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<ul class="content">
<li>享品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<script type="text/javascript">
var arr = ['orange','yellow','hotpink','green','purple'];//创建颜色数组
var ul=document.getElementsByTagName('ul');//获取ul标签
var lis2=ul[1].children;//获取正文中的li标签
for(var i=0;i<lis2.length;i++){
lis2[i].style.background=arr[i];//给每个li标签加上背景颜色
}

var lis1=ul[0].children;//获取侧边的li标签
var timer=null;
for(var i=0;i<lis1.length;i++){
lis1[i].index=i;//给lis1数组添加index属性
lis1[i].onclick=function(){
var count=this.index;//获取当前数组索引
clearInterval(timer);//清除定时器
timer=setInterval(function(){//定义定时器
var t=document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset||0;//获取body当前中被卷入的值
var speed=(count*document.body.offsetHeight-t)/10; ///设置加上速度
speed=speed>0?Math.ceil(speed):Math.floor(speed);//当加速度为正时向上取整，否则向下取整
window.scrollTo(0,t+speed);//将内容滚动到指定位置
if(count*lis2[0].offsetHeight==t){
clearInterval(timer);//当内容滚动到目标位置时，清除定时器
}

},20);
}
}
lis1[0].className="now";//将第一个侧边li标签的背景变为选中状态的颜色
window.onscroll=function(){//当滚动条发生滚动时触发
var num=document.body.scrollTop||document.documentElement.scrollTop;//获取内容当前位置
num=num/lis2[0].offsetHeight; ///当前滚动位置对应的索引
num=Math.ceil(num*2)/2;
if(num!=parseInt(num)){
num=parseInt(num);
}
for(var j=0;j<lis1.length;j++){//将所有侧边li标签的背景变为未选中状态的颜色
lis1[j].className="";
}
lis1[num].className="now";//将当前侧边li标签的背景变为选中状态的颜色
}
</script>
</body>
</html>

阅读全文

0 0