纯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实现网站超链接和图片提示效果
Mar 21 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
vuex实现简易计数器
Oct 27 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
大学生村官典型材料
2014/01/12 职场文书
给校长的一封检讨书
2014/09/20 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
大学生军训感言
2015/08/01 职场文书
师德培训心得体会2016
2016/01/09 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL