实现效果演示：

实现代码及注释：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>楼层跳跃式的页面布局</title>
  5. 	<meta charset="utf-8">
  6. 	<style type="text/css">
  7. 		*{
  8. 			margin: 0;
  9. 			padding: 0;
  10. 		}
  11. 		body, html{
  12. 			height: 100%;
  13. 		}
  14. 		ul{
  15. 			list-style: none;
  16. 			height: 100%;
  17. 		}
  18. 		ul li{
  19. 			height: 100%;
  20. 		}
  21. 		ol{
  22. 			list-style: none;
  23. 			position: fixed;
  24. 			top:200px;
  25. 			left: 50px;
  26. 		}
  27. 		ol li{
  28. 			width: 50px;
  29. 			height: 50px;
  30. 			border: 1px solid #000;
  31. 			text-align: center;
  32. 			line-height: 50px;
  33. 			margin-top: -1px;
  34. 			cursor: pointer;
  35. 		}
  36. 	</style>
  37. </head>
  38. <body>
  39. <ul>
  40. 	<li>第一区域</li>
  41. 	<li>第二区域</li>
  42. 	<li>第三区域</li>
  43. 	<li>第四区域</li>
  44. </ul>
  45. <ol>
  46. 	<li>1</li>
  47. 	<li>2</li>
  48. 	<li>3</li>
  49. 	<li>4</li>
  50. </ol>
  51.  
  52. <script type="text/javascript" src="myScroll.js"></script>
  53. <script type="text/javascript">
  54. 	// 点击ol的li，屏幕滑动到对应的ul的li
  55. 	// 利用window.scrollTo()；缓动动画实现
  56. 	var ul = document.getElementsByTagName("ul")[0];
  57. 	var ol = document.getElementsByTagName("ol")[0];
  58. 	var ulLiArr = ul.children;
  59. 	var olLiArr = ol.children;
  60. 	var target = 0;
  61. 	var leader = 0;
  62. 	var timer = null;
  63.  
  64. 	// 1. 指定ul和ol中li的背景色，对应li的背景色相同
  65. 	var arrColor = ["green","orange","yellow","red","gold"];
  66. 	// 利用for循环给两个数组中的元素上色
  67. 	for(var i=0; i<arrColor.length; i++){
  68. 		ulLiArr[i].style.backgroundColor = arrColor[i];
  69. 		olLiArr[i].style.backgroundColor = arrColor[i];
  70.  
  71. 		// 属性绑定索引值
  72. 		olLiArr[i].index = i;
  73. 		// 循环绑定，为每一个li绑定点击事件
  74. 		olLiArr[i].onclick =function(){
  75. 			// 获取目标位置
  76. 			target = ulLiArr[this.index].offsetTop;
  77. 			clearInterval(timer);
  78. 			// 利用缓动动画原理实现屏幕滑动
  79. 			timer = setInterval(function(){
  80. 				// (1).获取步长
  81. 				var step = (target-leader)/10;
  82. 				// (2).二次处理步长
  83. 				step = step > 0 ? Math.ceil(step) : Math.floor(step);
  84. 				// (3).屏幕滑动
  85. 				leader = leader + step;
  86. 				window.scrollTo(0, leader);
  87. 				// (4).清除定时器
  88. 				if(Math.abs(target-leader) <= Math.abs(step)){
  89. 					window.scrollTo(0, target);
  90. 					clearInterval(timer);
  91. 				}
  92. 			}, 25);
  93. 		}
  94. 		// 用scroll事件模拟盒子距离最顶端的距离
  95. 		window.onscroll = function(){
  96. 			// 每次屏幕滑动，把屏幕卷去的值赋给leader，模拟获取显示区域距离顶部的距离
  97. 			leader = scroll().top;
  98. 		}
  99. 	}
  100. </script>
  101. </body>
  102. </html>

　　myScroll.js

  1. function scroll() {
  2.     // 开始封装自己的scrollTop
  3.     if(window.pageYOffset !== undefined) {
  4.         // ie9+ 高版本浏览器
  5.         // 因为 window.pageYOffset 默认的是0,所以需要判断
  6.         return {
  7.             left: window.pageXOffset,
  8.             top: window.pageYOffset
  9.         }
  10.     }
  11.     else if(document.compatMode === "CSS1Compat") {
  12.         // 标准浏览器,来判断有没有声明DTD
  13.         return {
  14.             left: document.documentElement.scrollLeft,
  15.             top: document.documentElement.scrollTop
  16.         }
  17.     }
  18.     return {
  19.         // 未声明 DTD
  20.         left: document.body.scrollLeft,
  21.         top: document.body.scrollTop
  22.     }
  23. }

　　

【前端】纯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. iOS-多语言版本的开发（一)(转载)

    引言  多语言 & 本地化,随你怎么叫,道理差不多:一个App 要想走出国门,只支持一种语言是不能够的,也是不可能的,多元化世界已经融入我们的生活,对于一些应用,开发多语言版本,已经是不可避免 ...

  2. IIS7启用gzip

    压缩什么 服务器基于文件类型选择压缩什么,但这通常受限于对其进行的配置.很多网站就会压缩其HTML文档.压缩脚本和样式表也是非常值得的,压缩的内容包括XML和JSON在内的任何文本响应,但这里只关注脚 ...

  3. 启动HDFS

    $cd /app/hadoop/hadoop-2.2.0/sbin $./start-dfs.sh

  4. SQL死锁知识及解决办法

    [翻译]:SQL死锁-死锁排除 min.jiang 2014-03-18 00:23 阅读:874 评论:1     项目中死锁的解决经历 min.jiang 2014-03-17 01:09 阅读: ...

  5. PHPExcel使用-使用PHPExcel导出文件-导出MySQL数据

    现在数据库里面有一组数据,我们将它按照不同的难度进行分sheet. 首先我们需要写一个mysql的配置文件- db.config.php(utf-8编码) : <?php $dbconfig= ...

  6. springmvc接收参数

    springmvc执行流程 搭建ssm框架:http://www.cnblogs.com/liyafei/p/7955413.html 1:从表单中接收 普通请求参数 结构目录 role.html 1 ...

  7. latex中文模板

    \documentclass[UTF8,a4paper,10pt, twocolumn]{ctexart} \usepackage[left=2.50cm, right=2.50cm, top=2.5 ...

  8. [py][mx]django添加后台课程机构页数据-图片上传设置

    分析下课程页前台部分 机构类别-目前机构库中没有这个字段,需要追加下 所在地区 xadmin可以手动添加 课程机构 涉及到机构封面图, 即图片上传media设置, 也需要在xadmin里手动添加几条 ...

  9. oracle怎么恢复被覆盖的存储过程

    在oracle数据库中,如果覆盖了之前的存储过程,那得赶紧闪回,时长越长闪回的可能性越小. 原理很简单,存储过程的定义就是数据字典,修改数据字典跟修改普通表的数据没有区别,此时会把修改前的内容放到un ...

  10. C# 定时器 一个简单 并且可以直接运行的Demo

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...