js怎么写一个楼层

JS怎么写一个楼层？

要用JavaScript创建一个楼层效果，可以通过DOM操作、CSS样式和事件监听来实现。核心步骤包括：创建HTML结构、为楼层添加样式、编写JavaScript实现楼层功能。以下是详细的步骤和代码示例。

一、创建HTML结构

首先，需要在HTML中创建一个基础的结构，包括楼层的容器和各个楼层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楼层效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
        <div class="floor" id="floor1">Floor 1</div>
        <div class="floor" id="floor2">Floor 2</div>
        <div class="floor" id="floor3">Floor 3</div>
        <div class="floor" id="floor4">Floor 4</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、为楼层添加样式

使用CSS为楼层添加基本样式，包括容器的布局、楼层的高度和背景颜色等。

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}
#container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
.floor {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
}
#floor1 { background-color: #ff6347; }
#floor2 { background-color: #4682b4; }
#floor3 { background-color: #32cd32; }
#floor4 { background-color: #ff1493; }

三、编写JavaScript实现楼层功能

接下来，用JavaScript添加滚动事件监听器和楼层切换功能。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const floors = document.querySelectorAll('.floor');
    let currentFloor = 0;
    window.addEventListener('scroll', () => {
        const scrollPosition = window.scrollY + window.innerHeight / 2;
        floors.forEach((floor, index) => {
            if (floor.offsetTop <= scrollPosition && floor.offsetTop + floor.offsetHeight > scrollPosition) {
                currentFloor = index;
            }
        });
        highlightCurrentFloor(currentFloor);
    });
    function highlightCurrentFloor(index) {
        floors.forEach((floor, idx) => {
            if (idx === index) {
                floor.style.border = '5px solid yellow';
            } else {
                floor.style.border = 'none';
            }
        });
    }
});

四、楼层导航和事件监听

为了更好地实现楼层切换功能，可以添加一个导航栏和事件监听器。

<!-- Add this to your HTML body -->
<nav id="floorNav">
    <button data-floor="0">Floor 1</button>
    <button data-floor="1">Floor 2</button>
    <button data-floor="2">Floor 3</button>
    <button data-floor="3">Floor 4</button>
</nav>

/* Add this to your CSS file */
#floorNav {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
}
#floorNav button {
    margin: 5px 0;
    padding: 10px;
    font-size: 1em;
}

// Add this to your JavaScript file
document.addEventListener('DOMContentLoaded', () => {
    const floors = document.querySelectorAll('.floor');
    const navButtons = document.querySelectorAll('#floorNav button');
    navButtons.forEach(button => {
        button.addEventListener('click', () => {
            const floorIndex = parseInt(button.getAttribute('data-floor'));
            floors[floorIndex].scrollIntoView({ behavior: 'smooth' });
        });
    });
    window.addEventListener('scroll', () => {
        const scrollPosition = window.scrollY + window.innerHeight / 2;
        floors.forEach((floor, index) => {
            if (floor.offsetTop <= scrollPosition && floor.offsetTop + floor.offsetHeight > scrollPosition) {
                highlightCurrentFloor(index);
            }
        });
    });
    function highlightCurrentFloor(index) {
        floors.forEach((floor, idx) => {
            if (idx === index) {
                floor.style.border = '5px solid yellow';
            } else {
                floor.style.border = 'none';
            }
        });
        navButtons.forEach((button, idx) => {
            if (idx === index) {
                button.style.backgroundColor = '#333';
                button.style.color = 'white';
            } else {
                button.style.backgroundColor = '';
                button.style.color = '';
            }
        });
    }
});

五、优化性能和用户体验

在实际应用中，需要考虑性能优化和用户体验，尤其是在滚动事件监听器中。可以通过节流或防抖技术来减少滚动事件的触发频率，从而提高性能。

function throttle(fn, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = (new Date()).getTime();
        if (now - lastCall >= limit) {
            lastCall = now;
            return fn(...args);
        }
    };
}
window.addEventListener('scroll', throttle(() => {
    const scrollPosition = window.scrollY + window.innerHeight / 2;
    floors.forEach((floor, index) => {
        if (floor.offsetTop <= scrollPosition && floor.offsetTop + floor.offsetHeight > scrollPosition) {
            highlightCurrentFloor(index);
        }
    });
}, 100));

六、总结

通过以上步骤，我们实现了一个基本的楼层效果，包括楼层的HTML结构、CSS样式、JavaScript功能实现和性能优化。关键点在于DOM操作、事件监听和CSS样式的结合。在实际项目中，可以根据需求进一步扩展和优化功能。