最近做網(wǎng)頁(yè)設(shè)計(jì)，發(fā)現(xiàn)實(shí)現(xiàn)圖片跟隨鼠標(biāo)的效果非常好看。這個(gè)效果可以讓頁(yè)面更加生動(dòng)活潑，增加用戶體驗(yàn)。下面我將分享如何使用javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)的效果。 首先，讓我們看一個(gè)例子。假設(shè)我們有一個(gè)名為“follow”的圖片，我們需要讓它跟隨鼠標(biāo)移動(dòng)。我們可以使用以下代碼：

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獲取到一個(gè)id為“follow”的div元素，使用addEventListener函數(shù)為整個(gè)文檔添加一個(gè)鼠標(biāo)移動(dòng)事件的監(jiān)聽(tīng)器。在這個(gè)監(jiān)聽(tīng)器里面，我們獲取到鼠標(biāo)的當(dāng)前坐標(biāo)，并修改follow的CSS樣式來(lái)使它隨鼠標(biāo)移動(dòng)。 上面的代碼可能看起來(lái)比較簡(jiǎn)單，但卻可以實(shí)現(xiàn)非常好看的效果。現(xiàn)在，讓我們通過(guò)更深入的例子來(lái)看一下這個(gè)效果是如何實(shí)現(xiàn)的。 我們將創(chuàng)建一個(gè)名為“car”的div，并且將其設(shè)置為一張跟隨鼠標(biāo)的圖片。這個(gè)圖片會(huì)在鼠標(biāo)移動(dòng)時(shí)隨之移動(dòng)，但它不會(huì)超出瀏覽器窗口的邊界。這就意味著，當(dāng)鼠標(biāo)移動(dòng)到瀏覽器視窗的邊緣時(shí)，圖片會(huì)停止移動(dòng)。下面是代碼：

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";
});

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