写一个让一句话随着鼠标移动的小插件

// 创建一个 div 元素来容纳文本
const floatingText = document.createElement('div');
floatingText.style.position = 'fixed'; // 使其相对于视口定位
floatingText.style.pointerEvents = 'none'; // 避免干扰鼠标事件
floatingText.textContent = '这是一句会跟随鼠标移动的文字'; // 设置文本内容
floatingText.style.padding = '5px 10px'; // 添加一些内边距
floatingText.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 设置背景颜色
floatingText.style.color = 'white'; // 设置文字颜色
floatingText.style.borderRadius = '5px'; // 设置圆角
document.body.appendChild(floatingText); // 将元素添加到页面

// 监听鼠标移动事件
document.addEventListener('mousemove', (event) => {
  // 获取鼠标坐标
  const x = event.clientX;
  const y = event.clientY;

  // 设置元素的位置，稍微偏移以避免遮挡鼠标
  floatingText.style.left = `${x + 10}px`;
  floatingText.style.top = `${y + 10}px`;
});

使用方法：

将这段代码保存为一个 .js 文件，例如 floatingText.js。
在你的 HTML 文件中，通过 <script> 标签引入这个文件：

<!DOCTYPE html>
<html>
<head>
  <title>Floating Text Example</title>
</head>
<body>
  <!-- 其他 HTML 内容 -->

  <script src="floatingText.js"></script>
</body>
</html>

代码解释：

document.createElement('div'): 创建一个新的 div 元素。
style.position = 'fixed': 使元素相对于浏览器窗口固定定位。
style.pointerEvents = 'none': 防止该元素捕获鼠标事件，这样就不会干扰页面上的其他交互。
textContent: 设置 div 元素的文本内容。
style.padding, style.backgroundColor, style.color, style.borderRadius: 设置样式，使文本更易于阅读。
document.body.appendChild(floatingText): 将创建的 div 元素添加到页面中。
document.addEventListener('mousemove', ...): 监听鼠标移动事件。
event.clientX, event.clientY: 获取鼠标的 x 和 y 坐标。
style.left, style.top: 设置 div 元素的位置，使其跟随鼠标移动。x + 10 和 y + 10 使文本稍微偏移，避免完全遮挡鼠标指针。