如何在JavaScript中制作楼梯

在JavaScript中，可以使用HTML5和CSS3的一些新特性，以及一些简单的代码实现制作楼梯效果。

HTML结构

首先，我们需要在HTML文档中创建一个容器，用来包含楼梯的所有元素。我们选择使用一个有序列表（<ol> 标签）来实现。

<ol id="stairs"></ol>

CSS样式

为了使楼梯的样式更加美观，我们可以使用CSS来设置一些样式。这里先提供一个简单的样式，实际生产中可以自行根据需求修改。

#stairs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

#stairs li {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

#stairs li.active {
  background-color: #f00;
}

以上样式用于给楼梯容器和楼梯元素设置样式。其中，楼梯容器为 #stairs，楼梯元素为 #stairs li。这里设置了每个楼梯的宽度、高度、背景颜色、圆角、鼠标指针样式等。最后一个选择器 #stairs li.active 用于为活动状态的楼梯元素添加样式。

JavaScript代码

现在我们开始编写JavaScript代码。

获取HTML元素

首先，我们需要获取这些HTML元素。可以使用document.querySelector()方法。

const stairs = document.querySelector("#stairs"); // 获取楼梯容器
const steps = document.querySelectorAll("#stairs li"); // 获取楼梯元素
const length = steps.length; // 获取楼梯的数量

给楼梯元素添加事件

下一步，我们需要为每个楼梯元素添加点击事件。当用户单击一个楼梯时，页面将滚动到该楼层。

for (let i = 0; i < length; i++) {
  steps[i].addEventListener("click", function () {
    // do something
  });
}

获取楼层的位置

然后，我们需要获取每个楼层在页面中的位置。我们可以使用 document.querySelectorAll() 方法来获取所有楼层元素，然后再用 getBoundingClientRect() 方法获取它们在窗口中的位置。

const floors = document.querySelectorAll(".floor"); // 获取所有楼层元素

const floorPositions = []; // 存储每个楼层的位置

floors.forEach(function (floor) {
  const { top } = floor.getBoundingClientRect();
  floorPositions.push(top);
});

设置楼层的活动状态

接下来，我们需要为活动状态的楼层元素添加样式。我们可以使用 window.pageYOffset 属性获取窗口当前的滚动位置。只需判断这个位置是否在某个楼层的范围内，然后为那个楼层元素添加样式即可。

function setActiveStep() {
  const position = window.pageYOffset;

  for (let i = 0; i < floorPositions.length; i++) {
    if (position < floorPositions[i]) {
      steps.forEach((step) => step.classList.remove("active"));
      steps[i].classList.add("active");
      break;
    }
  }
}

window.addEventListener("scroll", setActiveStep);

滚动到楼层

最后，当用户单击某个楼层时，页面需要滚动到该楼层。我们可以使用 window.scrollTo() 方法实现。

steps[i].addEventListener("click", function () {
  window.scrollTo({
    top: floorPositions[i],
    behavior: "smooth",
  });
});

完整代码

完整的HTML、CSS和JavaScript结合起来，形成一个简单的楼梯效果。可以在一个HTML文档中放置多个楼层元素，然后将每个楼层的位置存储在 floorPositions 数组中，即可实现一个基本的楼梯效果。

<ol id="stairs">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

<div class="floor" id="floor1">楼层1</div>
<div class="floor" id="floor2">楼层2</div>
<div class="floor" id="floor3">楼层3</div>
<div class="floor" id="floor4">楼层4</div>

<style>
  #stairs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  #stairs li {
    width: 50px;
    height: 50px;
    margin: 0 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
  }

  #stairs li.active {
    background-color: #f00;
  }
</style>

<script>
  const stairs = document.querySelector("#stairs"); // 获取楼梯容器
  const steps = document.querySelectorAll("#stairs li"); // 获取楼梯元素
  const length = steps.length; // 获取楼梯的数量

  const floors = document.querySelectorAll(".floor"); // 获取所有楼层元素

  const floorPositions = []; // 存储每个楼层的位置

  floors.forEach(function (floor) {
    const { top } = floor.getBoundingClientRect();
    floorPositions.push(top);
  });

  function setActiveStep() {
    const position = window.pageYOffset;

    for (let i = 0; i < floorPositions.length; i++) {
      if (position < floorPositions[i]) {
        steps.forEach((step) => step.classList.remove("active"));
        steps[i].classList.add("active");
        break;
      }
    }
  }

  window.addEventListener("scroll", setActiveStep);

  for (let i = 0; i < length; i++) {
    steps[i].addEventListener("click", function () {
      window.scrollTo({
        top: floorPositions[i],
        behavior: "smooth",
      });
    });
  }
</script>