最近做網頁設計，發現實現圖片跟隨鼠標的效果非常好看。這個效果可以讓頁面更加生動活潑，增加用戶體驗。下面我將分享如何使用javascript實現圖片跟隨鼠標的效果。 首先，讓我們看一個例子。假設我們有一個名為“follow”的圖片，我們需要讓它跟隨鼠標移動。我們可以使用以下代碼：

var follow = document.getElementById('follow');
document.addEventListener('mousemove', function(e){
var x = e.clientX;
var y = e.clientY;
follow.style.left = x + "px";
follow.style.top = y + "px";
});

在上面的代碼中，我們首先使用document.getElementById獲取到一個id為“follow”的div元素，使用addEventListener函數為整個文檔添加一個鼠標移動事件的監聽器。在這個監聽器里面，我們獲取到鼠標的當前坐標，并修改follow的CSS樣式來使它隨鼠標移動。 上面的代碼可能看起來比較簡單，但卻可以實現非常好看的效果。現在，讓我們通過更深入的例子來看一下這個效果是如何實現的。 我們將創建一個名為“car”的div，并且將其設置為一張跟隨鼠標的圖片。這個圖片會在鼠標移動時隨之移動，但它不會超出瀏覽器窗口的邊界。這就意味著，當鼠標移動到瀏覽器視窗的邊緣時，圖片會停止移動。下面是代碼：

var car = document.createElement('div');
car.setAttribute('id', 'car');
document.body.appendChild(car);
var carImg = document.createElement('img');
carImg.src = 'img/car.png';
car.appendChild(carImg);
var carWidth = car.offsetWidth;
var carHeight = car.offsetHeight;
document.addEventListener('mousemove', function(e){
var x = e.clientX;
var y = e.clientY;
var maxX = window.innerWidth - carWidth;
var maxY = window.innerHeight - carHeight;
x = Math.min(x, maxX);
y = Math.min(y, maxY);
car.style.left = x + "px";
car.style.top = y + "px";
});

在上面的代碼中，我們首先創建了一個div和一個img元素，用于創建一個可以跟隨鼠標移動的汽車圖片。然后，我們獲取瀏覽器窗口的寬度和高度，并使用document.addEventListener函數為整個文檔添加一個鼠標移動事件的監聽器。 在監聽器里面，我們首先獲取鼠標的當前坐標。然后，我們計算出圖片可以移動到的最大x和y坐標，保證圖片不會移出瀏覽器窗口的邊界。最后，我們使用Math.min函數取兩個參數中的最小值，并將其賦值給圖片的left和top屬性。這樣，圖片就可以跟隨鼠標移動了。 以上就是如何使用javascript實現圖片跟隨鼠標的效果。雖然這個效果看起來簡單，但它可以讓頁面更加生動，增加用戶體驗。希望這篇文章能夠幫助你更好地使用javascript。