html 手机楼层布局,纯html、css、javascript实现楼层跳跃式的页面布局

本文主要介绍了纯html+css+javascript实现楼层跳跃式的页面布局,需要的朋友可以参考下，希望能帮助到大家。

实现效果演示：

实现代码及注释：

楼层跳跃式的页面布局

*{

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:200px;

left: 50px;

}

ol li{

width: 50px;

height: 50px;

border: 1px solid #000;

text-align: center;

line-height: 50px;

margin-top: -1px;

cursor: pointer;

}

• 第一区域
• 第二区域
• 第三区域
• 第四区域

1. 1
2. 2
3. 3
4. 4

// 点击ol的li，屏幕滑动到对应的ul的li

// 利用window.scrollTo()；缓动动画实现

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 = ["green","orange","yellow","red","gold"];

// 利用for循环给两个数组中的元素上色

for(var i=0; i

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

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

// 属性绑定索引值

olLiArr[i].index = i;

// 循环绑定，为每一个li绑定点击事件

olLiArr[i].onclick =function(){

// 获取目标位置

target = ulLiArr[this.index].offsetTop;

clearInterval(timer);

// 利用缓动动画原理实现屏幕滑动

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);

}

// 用scroll事件模拟盒子距离最顶端的距离

window.onscroll = function(){

// 每次屏幕滑动，把屏幕卷去的值赋给leader，模拟获取显示区域距离顶部的距离

leader = scroll().top;

}

}

myScroll.js

function scroll() {

// 开始封装自己的scrollTop

if(window.pageYOffset !== undefined) {

// ie9+ 高版本浏览器

// 因为 window.pageYOffset 默认的是0,所以需要判断

return {

left: window.pageXOffset,

top: window.pageYOffset

}

}

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

// 标准浏览器,来判断有没有声明DTD

return {

left: document.documentElement.scrollLeft,

top: document.documentElement.scrollTop

}

}

return {

// 未声明 DTD

left: document.body.scrollLeft,

top: document.body.scrollTop

}

}

相关推荐：