javascript文字跟随鼠标移动简易实现方法

JavaScript

965

2023/11/24 8:47:43

栏目: 编程语言

可以使用JavaScript的mousemove事件监听鼠标移动事件，并根据鼠标的坐标改变文字的位置。以下是一个简单的实现方法：

在HTML文件中创建一个元素用于显示文字，如一个div元素：

<div id="follow-text">跟随鼠标移动的文字</div>

在JavaScript文件中添加以下代码：

// 获取文字元素
var text = document.getElementById('follow-text');

// 监听鼠标移动事件
document.addEventListener('mousemove', function(event) {
  // 获取鼠标的坐标
  var x = event.clientX;
  var y = event.clientY;
  
  // 设置文字的位置为鼠标的坐标
  text.style.left = x + 'px';
  text.style.top = y + 'px';
});

这样，文字元素就会跟随鼠标的移动而改变位置。你可以根据需要自定义文字元素的样式和初始位置。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

javascript文字跟随鼠标移动简易实现方法

最新知识库

相关标签