纯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 29 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
Three.js学习之几何形状
Aug 01 Javascript
vue-dialog的弹出层组件
May 25 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 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实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
jquery $.ajax入门应用二
2008/11/19 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JavaScript中Function详解
2015/02/27 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
python清除字符串中间空格的实例讲解
2018/05/11 Python
浅谈django orm 优化
2018/08/18 Python
对python中dict和json的区别详解
2018/12/18 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python 制作本地应用搜索工具
2021/02/27 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
爱耳日活动总结
2014/04/30 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
党风廉政承诺书2016
2016/03/25 职场文书