鼠标Y轴位置控制两个Div高度动态调整问题求助

我来帮你实现这个需求，直接上完整可运行的代码，再给你拆解关键逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标控制Div高度</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #alto, #basso {
            width: 100%;
            transition: height 0.1s ease; /* 平滑过渡动画，数值越小变化越快 */
        }
        #alto {
            background-color: #4CAF50;
            height: 50%; /* 默认各占一半 */
        }
        #basso {
            background-color: #2196F3;
            height: 50%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="alto"></div>
        <div id="basso"></div>
    </div>

    <script>
        const container = document.getElementById('container');
        const altoDiv = document.getElementById('alto');
        const bassoDiv = document.getElementById('basso');

        // 监听容器内的鼠标移动事件
        container.addEventListener('mousemove', (e) => {
            const totalHeight = container.offsetHeight;
            const mouseYPosition = e.clientY;
            const midPoint = totalHeight / 2;

            if (mouseYPosition < midPoint) {
                // 鼠标在上半区：放大alto，缩小basso
                // 计算比例：从中间点到顶部，alto高度从50%过渡到100%
                const heightRatio = (midPoint - mouseYPosition) / midPoint;
                altoDiv.style.height = `${50 + heightRatio * 50}%`;
                bassoDiv.style.height = `${50 - heightRatio * 50}%`;
            } else {
                // 鼠标在下半区：放大basso，缩小alto
                // 计算比例：从中间点到底部，basso高度从50%过渡到100%
                const heightRatio = (mouseYPosition - midPoint) / midPoint;
                bassoDiv.style.height = `${50 + heightRatio * 50}%`;
                altoDiv.style.height = `${50 - heightRatio * 50}%`;
            }
        });

        // 可选：鼠标离开容器时恢复默认高度
        container.addEventListener('mouseleave', () => {
            altoDiv.style.height = '50%';
            bassoDiv.style.height = '50%';
        });
    </script>
</body>
</html>

关键逻辑拆解： #

1. 布局基础：

   • 容器#container设置为100vh占满视口高度，用flex-direction: column让两个div垂直排列。
   • 给两个div加transition属性，让高度变化有平滑过渡，避免生硬跳动。

2. 鼠标交互逻辑：

   • 监听容器的mousemove事件，获取鼠标在页面的Y坐标clientY，以及容器的总高度。
   • 以容器垂直中点为分界：
     • 鼠标在上半区时，通过比例计算让#alto的高度从50%逐渐增加到100%，同时#basso从50%减少到0。
     • 鼠标在下半区时，反向调整两个div的高度，确保两者高度总和始终等于容器高度（100vh）。

3. 体验优化：

   • 加入mouseleave事件，鼠标离开容器时自动恢复两个div各占50%的默认状态，避免停留在极端高度。
   • 过渡时间可以根据需求调整，比如把0.1s改成0.3s会让变化更平缓。

内容的提问来源于stack exchange，提问作者mattia