【前端】纯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实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- 前端三剑客:html,css,JavaScript
一.前端概念 二.html详细介绍 三.css基础 四.css盒模型 五.css高级布局 六.JS基础 七.JS常用类 八.JS基础操作 九.JS高级与事件 十.BOM与DOM 十一.jQuery初识 ...
- 购书网站前端实现（HTML+CSS+JavaScript）
购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...
- bootstrap+css进行页面布局
效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法
前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 网站前端性能优化之javascript和css
之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...
随机推荐
- Photoshop制作倒影的两种方法
图片加了倒影,画面立刻变得生动起来.而用PS,制作倒影是如此的方便. 素材1 将素材1导入文档,ctrl+J复制图层,编辑-变换-垂直翻转将翻转的图层拖至下方 为翻转的图层添加图层蒙版,选中渐变工具, ...
- （3.14）mysql基础深入——mysql 日志分析工具之pt-querty-digest【待完善】
(3.14)mysql基础深入——mysql 日志分析工具之pt-querty-digest 关键字:Mysql日志分析工具.mysqlsla 常用工具 [1]mysqldumpslow:官方提供的慢 ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
- 003-spring cloud gateway-概述、Route模型、网关初始化配置过程、基本原理
一.概述 网关服务核心是将进入的请求正确合理的路由到下层具体的服务进行业务处理,由此可见网关服务的核心就是路由信息的构建. Spring Cloud Gateway旨在提供一种简单而有效的方式来路由到 ...
- Linux实验楼学习之一
查看当前所在目录 pwd 创建文件:1-1.txt touch 1-1.txt 进入统计目录下的etc目录 cd /etc 强行终止当前程序 Ctrl + c 常用快捷键 按键 作用 Ctrl+d 键 ...
- Weka——PrincipalComponents分析
package weka.filters.unsupervised.attribute; PrincipalComponents 属性: /** The data to transform analy ...
- [LeetCode] 310. Minimum Height Trees_Medium tag: BFS
For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...
- NLP语料库
文本语料库是一个大型结构化文本的集合 NLTK包含了许多语料库: (1)古滕堡语料库 (2)网络和聊天文本 (3)布朗语料库 (4)路透社语料库 (5)就职演讲语料库 (6)标注文本语料库 词汇列表 ...
- js数组之可变函数
在js的数组中有两个方法为数组添加元素:1.push();2.unshift(),push函数是将元素添加到数组的末尾,现在不用说大家估计也能猜出来,unshift这个函数就是把元素添加到数组的开头的 ...
- C/S模型之TCP群聊
说明:利用TCP协议和多线程实现群聊功能.一个服务器,多个客户端(同一个程序多次启动).客户端向服务端发送数据,由服务端进行转发到其他客户端. /服务端 // WSASever.cpp : 定义控制台 ...