文字跟随鼠标代码 实例
时间: 2024-03-27 12:34:58 浏览: 111
以下是一个简单的文字跟随鼠标的代码实例:
```html
<!DOCTYPE html>
<html>
<head>
<title>文字跟随鼠标</title>
<style>
#follow-text{
position: absolute;
font-size: 24px;
color: #333;
opacity: 0.8;
pointer-events: none;
}
</style>
</head>
<body>
<div id="follow-text">跟随鼠标的文字</div>
<script>
var followText = document.getElementById("follow-text");
document.addEventListener("mousemove", function(e){
var x = e.clientX;
var y = e.clientY;
followText.style.left = x + 10 + "px";
followText.style.top = y + 10 + "px";
});
</script>
</body>
</html>
```
在这个例子中,我们使用了 `position: absolute` 来让文字跟随鼠标移动,并使用 `mousemove` 事件来监听鼠标移动。在事件处理程序中,我们获取了鼠标的坐标,并将文字的位置设置为比鼠标稍微偏移一些的位置,以避免文字被鼠标覆盖。
注意,在这个例子中,我们设置了 `pointer-events: none`,这样文字就不会阻挡鼠标事件,从而不会影响其他元素的交互。
阅读全文