JavaScript是一種非常強(qiáng)大的編程語言，可以用來制作各種酷炫的交互效果。在網(wǎng)頁中，經(jīng)常需要讓圖片跟著鼠標(biāo)移動(dòng)，例如實(shí)現(xiàn)視差滾動(dòng)、鼠標(biāo)懸停效果等。下面，就來看看如何使用JavaScript實(shí)現(xiàn)讓圖片跟著鼠標(biāo)移動(dòng)的效果。 首先，我們需要給要移動(dòng)的圖片設(shè)置position屬性為absolute或fixed，同時(shí)給它指定初始位置。然后，當(dāng)鼠標(biāo)在網(wǎng)頁中移動(dòng)時(shí)，我們就需要根據(jù)鼠標(biāo)的位置來改變圖片的位置。這可以通過監(jiān)聽鼠標(biāo)移動(dòng)事件來實(shí)現(xiàn)。 以下是一個(gè)簡(jiǎn)單的示例代碼：

HTML：

<div id="container"><img src="image.jpg" id="moveImg"></div>

JavaScript：

const container = document.querySelector('#container');
const moveImg = document.querySelector('#moveImg');
container.addEventListener('mousemove', (event) =>{
const x = event.clientX;
const y = event.clientY;
const imgX = x - moveImg.clientWidth / 2;
const imgY = y - moveImg.clientHeight / 2;
moveImg.style.left = imgX + 'px';
moveImg.style.top = imgY + 'px';
});

在上面的代碼中，我們使用了addEventListener來監(jiān)聽container元素的mousemove事件。在事件回調(diào)函數(shù)中，獲取了鼠標(biāo)的x、y坐標(biāo)，并計(jì)算出要移動(dòng)的圖片的位置（即圖片中心點(diǎn)的位置減去圖片寬高的一半），然后通過給圖片的style屬性設(shè)置left和top來實(shí)現(xiàn)圖片的移動(dòng)。 值得注意的是，我們?cè)谟?jì)算圖片位置時(shí)，除以了圖片的寬高。這是因?yàn)?，left和top的值是相對(duì)于包含元素（即container）的位置，而圖片的寬高是相對(duì)于自身的位置。因此，我們需要減去圖片寬高的一半，以保證圖片的中心點(diǎn)與鼠標(biāo)重合。 除了上述的示例代碼，還可以使用CSS的transform屬性來實(shí)現(xiàn)圖片跟著鼠標(biāo)移動(dòng)的效果。具體實(shí)現(xiàn)方式可以參考下面的代碼：

HTML：

<div id="container"><img src="image.jpg" id="moveImg"></div>

CSS：

#moveImg {
position: absolute;
transform: translate(-50%, -50%);
/* 注意：這里需要將圖片定位在中心點(diǎn)的位置 */
}
#container:hover #moveImg {
transform: translate(calc(-50% + var(--x) * 1px),
calc(-50% + var(--y) * 1px));
}

JavaScript：

const container = document.querySelector('#container');
const moveImg = document.querySelector('#moveImg');
container.addEventListener('mousemove', (event) =>{
const x = event.clientX;
const y = event.clientY;
moveImg.style.setProperty('--x', x);
moveImg.style.setProperty('--y', y);
});

在上面的代碼中，我們先給圖片的樣式設(shè)置了transform: translate(-50%, -50%)，將圖片定位在中心點(diǎn)的位置。然后，在container元素上添加了:hover偽類，當(dāng)鼠標(biāo)懸停在container上時(shí)，通過變換translate的具體數(shù)值來實(shí)現(xiàn)圖片移動(dòng)的效果。 在JavaScript中，我們使用了style.setProperty方法設(shè)置了--x和--y兩個(gè)自定義變量。這些變量的值是鼠標(biāo)的x、y坐標(biāo)，單位為像素。在CSS中，我們使用了calc()函數(shù)來計(jì)算translate的具體數(shù)值，其中用到了--x和--y這兩個(gè)自定義變量。 總的來說，無論是通過設(shè)置left和top屬性，還是通過CSS的transform屬性實(shí)現(xiàn)圖片跟著鼠標(biāo)移動(dòng)的效果，都非常簡(jiǎn)單易懂。關(guān)鍵在于理解事件回調(diào)函數(shù)中如何計(jì)算圖片的位置，以及如何根據(jù)自定義變量來計(jì)算translate的具體數(shù)值。希望本文能對(duì)你有所幫助！