要實現文字跟隨鼠標移動的效果,可以通過以下步驟來實現:
以下是一個示例代碼:
HTML:
<div id="follow">Follow me</div>
CSS:
#follow {
position: absolute;
top: 0;
left: 0;
font-size: 20px;
}
JavaScript:
var follow = document.getElementById('follow');
window.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
follow.style.left = x + 'px';
follow.style.top = y + 'px';
});
在上述代碼中,我們首先通過getElementById
方法獲取到follow
這個div元素,然后使用addEventListener
方法來監聽mousemove
事件。當鼠標移動時,會觸發事件回調函數,我們在回調函數中獲取鼠標的當前位置,并將文字的位置設置為鼠標的位置。