纯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实现楼层跳跃式的页面布局（实例代码），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
PHP+HTML+JavaScript+Css实现简单爬虫开发
开发一个爬虫,首先你要知道你的这个爬虫是要用来做什么的.我是要用来去不同网站找特定关键字的文章,并获取它的链接,以便我快速阅读. 按照个人习惯,我首先要写一个界面,理清下思路. 1.去不同网站.那么我们需要一个url输入框. 2.找特定关键字的文章.那么我们需要一个文章标题输入框. 3.获取文章链接.那么我们需要一个搜索结果的显示容器. <div class="jumbotron" id="mainJumbotron"> <div class=&q
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
纯js+html和纯css+html制作手风琴效果
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
-
XML、HTML、CSS与JS的区别整理
在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会. 首次,我们看一下这四项技术都是什么,能干什么? (一)XML-Extensible Markup Language 可扩展标记语言(标准通用标记语言的子集)是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然可扩展标记语言占用的空间比二进制数据要占用更多的空间,但可扩展标记语言极其简单易于掌握和使用. <Hello> <bcd>C
-
js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 <html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content=&quo
-
利用js+css+html实现固定table的列头不动
话不多说,跟这小编来一起看下吧 1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = funct
-
纯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: n
-
javascript单张多张图无缝滚动实例代码
我们会看到很多的网站上会使用多张图片无缝滚动的效果. 下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动. 1.效果展示: <!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{po
-
javascript实现文本框标签验证的实例代码
具体代码如下所述: < !DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-8" > <title > Document < /title> </head > <style type = "text/css" > body { background: #ccc; } labe
-
JavaScript基于SVG的图片切换效果实例代码
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层
-
JavaScript实现实时更新系统时间的实例代码
一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()
-
JavaScript中boolean类型之三种情景实例代码
实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
JavaScript操作select元素和option的实例代码
废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t
-
Javascript highcharts 饼图显示数量和百分比实例代码
Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=
-
JavaScript Base64 作为文件上传的实例代码解析
例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406
-
javascript按钮禁用和启用的效果实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!doctype html> <html> <head> <meta charset="utf-8"> <title>按钮启用和禁用</title> <script type="text/javascript"> function btn1() { document.getElementById("btn1"