欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript和html以及css实现楼层跳跃式的页面布局的案例

程序员文章站 2022-04-10 17:58:16
...
实现代码及注释:


<!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
  }
}

总结

以上就是JavaScript和html以及css实现楼层跳跃式的页面布局的案例的详细内容,更多请关注其它相关文章!