纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）
程序员文章站
2022-07-06 20:26:06
实现效果演示：
实现代码及注释：
实现效果演示：
实现代码及注释：
<!doctype html>
<html>
<head>
<title>楼层跳跃式的页面布局</title>
<meta charset="utf-8">
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<ul>
<li>第一区域</li>
<li>第二区域</li>
<li>第三区域</li>
<li>第四区域</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script type="text/javascript" src="myscroll.js"></script>
<script type="text/javascript">
// 点击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<arrcolor.length; 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;
}
}
</script>
</body>
</html>
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
}
}
总结
以上所述是小编给大家介绍的纯html+css+javascript实现楼层跳跃式的页面布局（实例代码），希望对大家有所帮助