纯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 事件记录使用说明
Oct 20 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
prototype.js常用函数详解
Jun 18 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
浅谈React之状态(State)
Sep 19 Javascript
Vue面试题及Vue知识点整理
Oct 07 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模板技术[转]
2007/01/04 PHP
PHP中常用的转义函数
2014/02/28 PHP
php查询ip所在地的方法
2014/12/05 PHP
php验证码生成器
2017/05/24 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python字典操作简明总结
2015/04/13 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python中的面向接口编程示例详解
2021/01/17 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
技术总监管理职责范本
2014/03/06 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
岗位工作说明书
2014/07/29 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python