实现鼠标跟随的屏幕十字线效果：HTML+CSS+JavaScript 实战

在很多交互场景中，我们需要实现鼠标跟随效果，其中十字线跟随鼠标移动是一个经典案例。这种效果常见于图像编辑工具、设计软件或需要精确定位的网页应用中。本文将详细介绍如何使用 HTML、CSS 和原生 JavaScript 实现这一效果。

效果预览 实现后的效果是：当鼠标在页面上移动时，会出现一组交叉的水平和垂直线条（十字线），始终以鼠标当前位置为交叉点，跟随鼠标实时移动。十字线会贯穿整个视口，清晰指示当前鼠标位置。

实现思路 创建十字线的 HTML 元素（水平和垂直两条线） 使用 CSS 定位和样式美化十字线 通过 JavaScript 监听鼠标移动事件 根据鼠标坐标动态更新十字线位置

完整代码实现

`

鼠标跟随十字线效果 /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: #f0f0f0; position: relative; overflow: hidden; } /* 十字线样式 */ .crosshair { position: absolute; pointer-events: none; /* 使十字线不影响鼠标交互 */ background-color: #ff4444; opacity: 0.7; /* 半透明效果，避免完全遮挡内容 */ z-index: 9999; /* 确保十字线在最上层 */ } /* 水平线 */ .horizontal { width: 100vw; height: 2px; } /* 垂直线 */ .vertical { width: 2px; height: 100vh; } /* 页面内容样式 */ .content { padding: 20px; text-align: center; position: relative; z-index: 1; /* 确保内容在十字线下方 */ } </style>

<!-- 页面内容 -->
<div class="content">
    <h1>鼠标跟随十字线演示</h1>
    <p>移动鼠标查看十字线效果</p>
</div>

<script>
    // 获取十字线元素
    const horizontalLine = document.getElementById('horizontal');
    const verticalLine = document.getElementById('vertical');
    
    // 监听鼠标移动事件
    document.addEventListener('mousemove', (e) => {
        // 获取鼠标当前坐标
        const x = e.clientX;
        const y = e.clientY;
        
        // 更新水平线位置（垂直方向）
        horizontalLine.style.top = `${y}px`;
        
        // 更新垂直线位置（水平方向）
        verticalLine.style.left = `${x}px`;
    });
</script>

`

代码解析 HTML 结构：

创建了两个 div 元素分别作为水平线和垂直线 添加了一个 content 容器用于展示页面内容 CSS 样式：

使用position: absolute使十字线可以绝对定位 pointer-events: none确保十字线不会干扰鼠标与页面其他元素的交互 半透明效果 (opacity: 0.7) 让十字线既可见又不完全遮挡页面内容 合理设置 z-index 确保十字线在最上层 JavaScript 逻辑：

通过getElementById获取十字线元素 监听mousemove事件获取鼠标实时坐标 使用clientX和clientY获取鼠标相对于视口的坐标 动态更新十字线的top和left样式属性实现跟随效果 扩展优化 自定义样式：可以通过修改 CSS 自定义十字线的颜色、粗细、透明度等；

.crosshair { background-color: #00ff00; /* 绿色十字线 / width: 3px; / 更粗的线条 / opacity: 0.5; / 更低的透明度 */ }

添加动画效果：给十字线添加过渡动画使移动更平滑；

`// 添加一个按钮控制 const toggleBtn = document.createElement('button'); toggleBtn.textContent = '显示/隐藏十字线'; toggleBtn.style.position = 'fixed'; toggleBtn.style.bottom = '20px'; toggleBtn.style.right = '20px'; toggleBtn.style.zIndex = '10000'; document.body.appendChild(toggleBtn);

toggleBtn.addEventListener('click', () => { const crosshairs = document.querySelectorAll('.crosshair'); crosshairs.forEach(cross => { cross.style.display = cross.style.display === 'none' ? 'block' : 'none'; }); });`

总结 本文介绍了如何使用 HTML、CSS 和 JavaScript 实现鼠标跟随的十字线效果。核心原理是通过监听鼠标移动事件，实时获取鼠标坐标并更新十字线元素的位置。这种方法简单高效，兼容性好，适用于各种需要精确定位的网页应用场景。