前端纯html+css+javascript实现楼层跳跃式的页面布局

Posted 2020-10-11 Dragonir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端纯html+css+javascript实现楼层跳跃式的页面布局相关的知识，希望对你有一定的参考价值。

实现效果演示：

实现代码及注释：

<!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实现楼层跳跃式的页面布局的主要内容，如果未能解决你的问题，请参考以下文章

[前端] html+css+javascript 实现选项卡切换效果

网站前端_JavaScript-项目经验.纯JavaScript实现客户端的分页功能?

HTML+CSS+JavaScript实现待办事项（纯DOM实现）

Javascript库，前端框架（UI框架），模板引擎

是否可以使用纯 CSS/HTML 而没有 JavaScript 来实现 GDPR Cookie 同意？不希望脚本阻止程序阻止它