纯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 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
vue如何从接口请求数据
Jun 22 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
浅谈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
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
年终自我鉴定
2013/10/09 职场文书
优秀党员获奖感言
2014/02/18 职场文书
关爱残疾人标语
2014/06/25 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
Docker部署Mysql8的实现步骤
2022/07/07 Servers