溫馨提示×

javascript文字跟隨鼠標移動簡易實現(xiàn)方法

小億
168
2023-12-19 08:47:43
欄目: 編程語言

可以使用JavaScript的mousemove事件監(jiān)聽鼠標移動事件，并根據(jù)鼠標的坐標改變文字的位置。以下是一個簡單的實現(xiàn)方法：

  1. 在HTML文件中創(chuàng)建一個元素用于顯示文字，如一個div元素：
<div id="follow-text">跟隨鼠標移動的文字</div>
  1. 在JavaScript文件中添加以下代碼：
// 獲取文字元素
var text = document.getElementById('follow-text');

// 監(jiān)聽鼠標移動事件
document.addEventListener('mousemove', function(event) {
  // 獲取鼠標的坐標
  var x = event.clientX;
  var y = event.clientY;
  
  // 設(shè)置文字的位置為鼠標的坐標
  text.style.left = x + 'px';
  text.style.top = y + 'px';
});

這樣，文字元素就會跟隨鼠標的移動而改變位置。你可以根據(jù)需要自定義文字元素的樣式和初始位置。

0 踩