本文详解如何利用 javascript 将鼠标在视口中的垂直坐标（event.offsety）线性映射为 css 宽度值（如 0–100px），实现“鼠标越靠上，元素越宽”的响应式效果，并提供可直接运行的完整示例与关键注意事项。
本文详解如何利用 javascript 将鼠标在视口中的垂直坐标（event.offsety）线性映射为 css 宽度值（如 0–100px），实现“鼠标越靠上，元素越宽”的响应式效果，并提供可直接运行的完整示例与关键注意事项。
在交互式 UI 开发中，常需将鼠标位置转化为可控的视觉属性（如宽度、高度、透明度等）。本例聚焦于垂直位置 → 宽度（px）的线性映射：要求当鼠标位于视口顶部时，目标元素宽度为 100px；位于底部时为 0px；中间位置按比例插值。
核心原理是线性变换：
给定视口高度 H 和鼠标相对于触发元素的垂直偏移 y（即 event.offsetY），我们希望构建函数：
width = f(y) = 100 × (H − y) / H
该公式确保：
- y = 0（顶部）→ width = 100px
- y = H（底部）→ width = 0px
- y ∈ [0, H] → width ∈ [0, 100]
以下是推荐的完整实现：
document.addEventListener('DOMContentLoaded', () => {
const MAX_WIDTH = 100;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const elBar = document.querySelector('.bar');
const elInfo = document.querySelector('.info');
window.addEventListener('mousemove', (event) => {
// 关键计算：将 offsetY 映射到 [0, MAX_WIDTH] 区间
const width = Math.round(((viewportHeight - event.offsetY) / viewportHeight) * MAX_WIDTH);
// 确保宽度不越界（防御性处理）
const clampedWidth = Math.max(0, Math.min(MAX_WIDTH, width));
elBar.style.width = `${clampedWidth}px`;
elInfo.textContent = `Width: ${clampedWidth}px`;
});
});
配套 HTML 与 CSS 示例：
<div class="bar"> </div> <div class="info">Move your mouse anywhere in the viewport</div>
.bar {
background: #e74c3c;
display: inline-block;
height: 24px;
vertical-align: middle;
margin-right: 12px;
}
.info {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #333;
}
⚠️ 关键注意事项：
- event.offsetY 是鼠标相对于事件目标元素（如 window）左上角的 Y 坐标。若监听 window 的 mousemove，则 offsetY 实际等于 clientY（因 window 无 offset 基准），但为语义清晰与兼容性，建议改用 event.clientY 并配合 window.innerHeight —— 此处代码仍有效，但需知其行为本质；
- 务必使用 Math.round() 或 Math.floor() 避免小数像素导致渲染模糊；
- 添加 Math.max(0, Math.min(MAX_WIDTH, ...)) 进行边界钳制，防止因滚动或缩放导致 offsetY 超出视口范围而产生负宽或超限值；
- 若需基于文档总高度（而非视口）映射，请替换 viewportHeight 为 document.documentElement.scrollHeight，并注意 offsetY 的基准需同步调整（例如监听 document 并使用 event.pageY）。
此方案轻量、高效，无需第三方库，适用于进度条、悬停反馈条、动态导航指示器等场景。
