纯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延迟执行实现方法(setTimeout)
Dec 30 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
深入探究node之Transform
Jul 20 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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简单实现多语言切换的方法
2016/05/09 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
javascript动画浅析
2012/08/30 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
python验证码识别的示例代码
2017/09/21 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
工厂实习感言
2014/01/14 职场文书
数学系毕业生求职信
2014/05/29 职场文书
护士节活动总结
2014/08/29 职场文书
生产操作工岗位职责
2014/09/16 职场文书
社区好人好事材料
2014/12/26 职场文书
市场部岗位职责范本
2015/04/15 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS