写一个盒子跟随鼠标光针并且在页面上显示坐标的html
时间: 2024-09-11 09:04:20 浏览: 32
要在HTML中创建一个跟随鼠标移动并显示坐标的小盒子,你需要结合CSS和JavaScript。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
#tooltip {
position: absolute;
display: none;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 5px;
font-size: 14px;
color: #000;
white-space: nowrap;
z-index: 999;
}
</style>
</head>
<body>
<div id="tooltip"></div>
<script>
// 获取元素
const tooltip = document.getElementById('tooltip');
const mousePosition = { x: 0, y: 0 };
// 鼠标事件监听器
function updateTooltip(event) {
mousePosition.x = event.clientX;
mousePosition.y = event.clientY;
// 更新提示框的位置和内容
tooltip.style.left = `${mousePosition.x}px`;
tooltip.style.top = `${mousePosition.y}px`;
tooltip.textContent = `当前坐标: X=${mousePosition.x}, Y=${mousePosition.y}`;
// 显示提示框(可视区域)
if (tooltip.getBoundingClientRect().top > 0 &&
tooltip.getBoundingClientRect().bottom < window.innerHeight &&
tooltip.getBoundingClientRect().left > 0 &&
tooltip.getBoundingClientRect().right < window.innerWidth) {
tooltip.style.display = 'block';
} else {
tooltip.style.display = 'none';
}
}
// 添加鼠标移动事件监听
document.addEventListener('mousemove', updateTooltip);
document.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
});
</script>
</body>
</html>
```
在这个例子中,我们首先定义了一个`#tooltip`的CSS样式,设置其为绝对定位。然后在JavaScript中,我们获取这个元素并添加两个事件监听器:`mousemove`用于跟随鼠标移动更新位置和内容,`mouseout`则在鼠标移出时隐藏提示框。
当你将此代码复制到HTML文件并在浏览器中打开,一个小的、透明的矩形会跟随你的鼠标移动,并在矩形内部显示当前的坐标值。