【前端】纯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.把样式表置于顶 ...
随机推荐
- window10 telnet的启用
(1) window+R打开运行窗口,输入control,如图: (2) 点击类别改成大图标: 如图所示: 然后点击程序和功能. (3) 然后依次点击:启用或者关闭windows功能->teln ...
- 莫队学习笔记(未完成QAQ
似乎之前讲评vjudge上的这题的时候提到过?但是并没有落实(...我发现我还有好多好多没落实?vjudge上的题目还没搞,然后之前考试的题目也都还没总结?天哪我哭了QAQ 然后这三道题我都是通过一道 ...
- div+css网页标准布局实例教程（一）
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- ConcurrentLinkedQueue
我们要实现一个线程安全的队列有两种实现方式,阻塞算法.非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把锁) 或两个锁(入队和出队用不同的锁)等方式来实现,而非阻塞的实现方式则可以使用循环 ...
- sql server 基本问题解决思路
1.数据库故障排查步骤,如何处理紧急数据库问题;首先根据报错信息找到故障原因.然后实施对应的解决方案.2.SQL调优步骤,如何来判断SQL语句存在问题,怎么定位问题,如何解决这些问题:可以建立一个Pe ...
- Windows五种IO模型性能分析和Linux五种IO模型性能分析
Windows五种IO模型性能分析和Linux五种IO模型性能分析 http://blog.csdn.net/jay900323/article/details/18141217 http://blo ...
- [py]access日志入mysql-通过flask前端展示
目录 pymysql组装sql入库日志 代码组织 将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法 采集这些指标(metirc)都是linux环境,会用到 ...
- 【Flask】关于Flask的request属性
前言 在进行Flask开发中,前端需要发送不同的请求及各种带参数的方式,比如GET方法在URL后面带参数和POST在BODY带参数,有时候又是POST的表单提交方式,这个时候就需要从request提取 ...
- 第三章基本的SQl查询语言
---恢复内容开始--- ---恢复内容结束---
- redis windows版本下载
https://github.com/dmajkic/redis/downloads http://windows.php.net/downloads/pecl/snaps/redis/3.1.4rc ...