纯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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
快速入门Vue
Dec 19 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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
thinkphp学习笔记之多表查询
2014/07/28 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
使用python分析git log日志示例
2014/02/27 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python实现排序算法解析
2018/09/08 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
老公爱的承诺书
2014/03/31 职场文书
大学生应聘求职信
2014/05/26 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
领导新年致辞2016
2015/07/29 职场文书