html楼层效果,楼层跳跃.html

Title

*{

padding:0;

margin: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;

}

• 鞋子区域
• 袜子区域
• 裤子区域
• 裙子区域
• 帽子区域

1. 鞋子
2. 袜子
3. 裤子
4. 裙子
5. 帽子

function scroll(){

if(window.pageYOffset!==undefined){

return{

// 谷歌、火狐、IE9+

"top":window.pageYOffset,

"left":window.pageXOffset

};

// IE678

}else if(document.compatMode===CSS1Compat){

return{

"top":document.documentElement.scrollTop,

"left":document.documentElement.scrollLeft

};

}else{

return{

"top":document.body.scrollTop,

"left":document.body.scrollLeft

};

}

}

//点击ol中的li，屏幕滑到对应的ul中的li范围内

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;

var arrColor=["pink","lightblue","lightyellow","lightgreen","darkred"];

// ol和ul颜色对应

for(var i=0;i

ulLiArr[i].style.backgroundColor=arrColor[i];

olLiArr[i].style.backgroundColor=arrColor[i];

olLiArr[i].index=i;

olLiArr[i].οnclick=function(){

target=ulLiArr[this.index].offsetTop;

clearInterval(timer);

timer=setInterval(function(){

var step=(target-leader)/10;

step=step>0?Math.ceil(step):Math.floor(step);

leader=leader+step;

window.scrollTo(0,leader);

if(Math.abs(target-leader)<=Math.abs(step)){

window.scrollTo(0,target);

clearInterval(timer);

}

},30)

}

}

//用scroll事件模拟盒子距离最顶端的距离,使其一开始出现屏幕滚动的情况会有滑动，而不是直接跳转

window.οnscrοll=function(){

leader=scroll().top;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史