Home > Article > Web Front-end > A case study of JavaScript, html and css implementing floor-hopping page layout

A case study of JavaScript, html and css implementing floor-hopping page layout

黄舟Original: 2017-10-25 09:23:341524browse

Implementation code and comments:

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

Summary

The above is the detailed content of A case study of JavaScript, html and css implementing floor-hopping page layout. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to reuse strategies in Angular routingNext article：How to reuse strategies in Angular routing

See more

A case study of JavaScript, html and css implementing floor-hopping page layout

Related articles