纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)


Posted in Javascript onOctober 25, 2017

实现效果演示:

纯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实现楼层跳跃式的页面布局(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
浅谈Node.js之异步流控制
Oct 25 #Javascript
AngularJS 实现购物车全选反选功能
Oct 24 #Javascript
React Native时间转换格式工具类分享
Oct 24 #Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 #Javascript
React Native AsyncStorage本地存储工具类
Oct 24 #Javascript
React Native验证码倒计时工具类分享
Oct 24 #Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 #Javascript
You might like
PHP反射机制用法实例
2014/08/28 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
javascript数组去掉重复
2011/05/12 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
详解vuex的简单使用
2018/03/12 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python实现单向链表详解
2018/02/08 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
学生安全教育材料
2014/02/14 职场文书
小学教师自我评价
2015/03/04 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
文明旅游倡议书
2015/04/28 职场文书
仙境之桥观后感
2015/06/16 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫