实现效果演示：

实现代码及注释：

<!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实现楼层跳跃式的页面布局的更多相关文章

  1. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  2. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  3. 前端三剑客:html,css,JavaScript

    一.前端概念 二.html详细介绍 三.css基础 四.css盒模型 五.css高级布局 六.JS基础 七.JS常用类 八.JS基础操作 九.JS高级与事件 十.BOM与DOM 十一.jQuery初识 ...

  4. 购书网站前端实现（HTML+CSS+JavaScript）

    购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...

  5. bootstrap+css进行页面布局

    效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...

  6. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  7. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  8. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  9. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

随机推荐

  1. JS-nodejs--nodewebkit--npm穿墙cnpm

    npm install 本地安装与全局安装的区别 本地安装1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)2. 可以通过 require() 来引入本地安装的包 全局安装 ...

  2. 解决windows7笔记本下玩游戏的显示问题

    笔者是Windows7操作系统的粉丝,我的本本同样也是win7系统,和大家一样喜欢界面豪华漂亮,但包括笔者在内的不少用户总埋怨,在玩游戏时,游戏画面居中屏幕两边是黑条,无法全屏显示游戏画面.对于这个问 ...

  3. 2018/03/26 每日一个Linux命令 之 du

    昨天使用 df 查看了磁盘空间中所有的容量. 今天学习 du 查看目录或者文件的大小. du会显示指定的目录或文件所占用的磁盘空间. -- du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合 ...

  4. Django的调试方法

    web程序调试起来和桌面程序有着很大的差别,对于Django程序来说调试更是个问题.我们可以用postman发送http请求,下面就介绍几种调试方法: 1.在Eclipse+Pydev中调试Djang ...

  5. Django中配置用Redis做缓存和session

    django-redis文档: http://django-redis-chs.readthedocs.io/zh_CN/latest/# 一.在Django中配置 # Django的缓存配置 CAC ...

  6. 【Python虫师】多窗口定位

    <注意>iframe框架 iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中. 框架(framework)是一个基本概念上的结构,用于去 ...

  7. python3爬虫-爬取新浪新闻首页所有新闻标题

    准备工作:安装requests和BeautifulSoup4.打开cmd,输入如下命令 pip install requests pip install BeautifulSoup4 打开我们要爬取的 ...

  8. dedecms用keyword标签调用含有某一关键词的文章

    前面我们探讨了调用{dede:likewords}为dedecms添加相关搜索词,如果要调用含有某一关键词的文章可以实现吗?比如ytkah的网站有很多文章中含有“微信”的词,那么想在网站首页.频道页. ...

  9. Pandas之Series+DataFrame

    Series是带有标签的一维数组,可以保存任何数据类型(整数,字符串,浮点数,python对象) index查看series索引,values查看series值 series相比于ndarray,是一 ...

  10. mysql中char和varchar详解

    一.首先创建表. CREATE TABLE `t1` ( `id` int(11) DEFAULT NULL, `a` char(255) DEFAULT NULL) ENGINE=InnoDB DE ...