# JavaScript怎么實現跟隨鼠標移動的圖片
在現代網頁設計中，實現元素跟隨鼠標移動的交互效果能顯著提升用戶體驗。本文將詳細介紹如何使用純JavaScript實現圖片跟隨鼠標移動的效果，并深入講解實現原理、代碼優化和常見問題解決方案。
## 一、實現原理
跟隨鼠標移動的效果核心是通過JavaScript監聽鼠標移動事件（`mousemove`），獲取當前鼠標坐標，然后動態修改目標元素的定位樣式。主要依賴以下技術點：
1. **事件監聽**：通過`addEventListener`監聽`mousemove`事件
2. **坐標獲取**：從事件對象中提取`clientX`和`clientY`
3. **元素定位**：使用CSS的`position: absolute`或`position: fixed`
4. **動畫優化**：通過`transform`實現平滑移動
## 二、基礎實現代碼
### HTML結構
```html
<!DOCTYPE html>
<html>
<head>
<style>
#follow-img {
position: absolute;
width: 50px;
height: 50px;
pointer-events: none; /* 防止圖片阻擋鼠標事件 */
}
</style>
</head>
<body>
<img id="follow-img" src="your-image.png" alt="跟隨鼠標的圖片">
<script src="script.js"></script>
</body>
</html>
const followImg = document.getElementById('follow-img');
document.addEventListener('mousemove', (e) => {
// 直接設置圖片位置（基礎版）
followImg.style.left = e.clientX + 'px';
followImg.style.top = e.clientY + 'px';
});
document.addEventListener('mousemove', (e) => {
// 使用transform實現硬件加速的平滑動畫
followImg.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});
let posX = 0, posY = 0;
const delay = 20; // 延遲系數
document.addEventListener('mousemove', (e) => {
// 計算目標位置
const targetX = e.clientX - followImg.offsetWidth / 2;
const targetY = e.clientY - followImg.offsetHeight / 2;
// 使用緩動公式實現延遲效果
posX += (targetX - posX) / delay;
posY += (targetY - posY) / delay;
followImg.style.transform = `translate(${posX}px, ${posY}px)`;
});
let posX = 0, posY = 0;
let mouseX = 0, mouseY = 0;
const speed = 0.1;
function animate() {
// 計算距離差
const distX = mouseX - posX;
const distY = mouseY - posY;
// 應用緩動
posX += distX * speed;
posY += distY * speed;
// 更新位置
followImg.style.transform = `translate(${posX}px, ${posY}px)`;
requestAnimationFrame(animate);
}
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// 啟動動畫循環
animate();
問題現象：圖片的左上角跟隨鼠標，而不是中心點
解決方案：
// 減去圖片寬高的一半
const imgWidth = followImg.offsetWidth;
const imgHeight = followImg.offsetHeight;
followImg.style.left = (e.clientX - imgWidth/2) + 'px';
followImg.style.top = (e.clientY - imgHeight/2) + 'px';
問題原因：clientY不包含滾動偏移
解決方案：
const scrollY = window.scrollY || window.pageYOffset;
followImg.style.top = (e.clientY + scrollY - imgHeight/2) + 'px';
transform代替top/left（觸發GPU加速）<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 200vh; /* 測試頁面滾動 */
}
#follow-img {
position: fixed;
width: 80px;
height: 80px;
pointer-events: none;
transition: transform 0.1s ease-out;
z-index: 9999;
}
</style>
</head>
<body>
<h1>鼠標跟隨效果演示</h1>
<p>請移動您的鼠標...</p>
<img id="follow-img" src="https://via.placeholder.com/80" alt="跟隨圖標">
<script>
const img = document.getElementById('follow-img');
let currentX = 0, currentY = 0;
const factor = 0.2; // 跟隨速度系數
function moveImg(e) {
const targetX = e.clientX - img.offsetWidth/2;
const targetY = e.clientY - img.offsetHeight/2;
currentX += (targetX - currentX) * factor;
currentY += (targetY - currentY) * factor;
img.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
// 添加防抖的事件監聽
let isMoving = false;
document.addEventListener('mousemove', (e) => {
if (!isMoving) {
requestAnimationFrame(() => {
moveImg(e);
isMoving = false;
});
isMoving = true;
}
});
</script>
</body>
</html>
通過本文介紹的方法，您可以輕松實現各種鼠標跟隨效果。根據實際需求調整參數，可以創造出從簡單到復雜的各種交互體驗。 “`
這篇文章共計約1350字，包含了基礎實現、進階優化、問題解決方案和完整示例，采用Markdown格式編寫，可以直接用于技術博客或文檔。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
