楼层组件js实现
以下是实现楼层组件的 JavaScript 方法和关键代码示例：
基础结构
使用 HTML 和 CSS 创建楼层容器，通过 JavaScript 动态控制楼层切换：
<div class="floor-container">
<div class="floor" data-floor="1">1F</div>
<div class="floor" data-floor="2">2F</div>
<div class="floor-nav">
<button class="prev-btn">↑</button>
<button class="next-btn">↓</button>
</div>
</div>核心功能实现
通过事件监听和 classList 控制楼层显隐：
const floors = document.querySelectorAll('.floor');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentFloor = 1;
function updateFloors() {
floors.forEach(floor => {
floor.classList.remove('active');
if(parseInt(floor.dataset.floor) === currentFloor) {
floor.classList.add('active');
}
});
}
prevBtn.addEventListener('click', () => {
if(currentFloor > 1) {
currentFloor--;
updateFloors();
}
});
nextBtn.addEventListener('click', () => {
if(currentFloor < floors.length) {
currentFloor++;
updateFloors();
}
});动画效果增强
添加 CSS 过渡效果使切换更平滑：
.floor {
transition: all 0.3s ease;
opacity: 0;
height: 0;
overflow: hidden;
}
.floor.active {
opacity: 1;
height: auto;
}楼层定位功能
实现快速跳转到指定楼层：
function goToFloor(floorNum) {
if(floorNum >= 1 && floorNum <= floors.length) {
currentFloor = floorNum;
updateFloors();
}
}
// 为每个楼层添加点击事件
floors.forEach(floor => {
floor.addEventListener('click', () => {
goToFloor(parseInt(floor.dataset.floor));
});
});响应式处理
添加窗口大小变化时的自适应处理：
window.addEventListener('resize', () => {
// 重新计算楼层位置等参数
});以上代码组合可实现基本的楼层组件功能，包含楼层切换、动画效果和定位功能。实际应用中可根据需求扩展更多特性如楼层内容懒加载、触摸滑动支持等。
