JavaScript是一种非常强大的编程语言，可以用来制作各种酷炫的交互效果。在网页中，经常需要让图片跟着鼠标移动，例如实现视差滚动、鼠标悬停效果等。下面，就来看看如何使用JavaScript实现让图片跟着鼠标移动的效果。 首先，我们需要给要移动的图片设置position属性为absolute或fixed，同时给它指定初始位置。然后，当鼠标在网页中移动时，我们就需要根据鼠标的位置来改变图片的位置。这可以通过监听鼠标移动事件来实现。 以下是一个简单的示例代码：

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来监听container元素的mousemove事件。在事件回调函数中，获取了鼠标的x、y坐标，并计算出要移动的图片的位置（即图片中心点的位置减去图片宽高的一半），然后通过给图片的style属性设置left和top来实现图片的移动。 值得注意的是，我们在计算图片位置时，除以了图片的宽高。这是因为，left和top的值是相对于包含元素（即container）的位置，而图片的宽高是相对于自身的位置。因此，我们需要减去图片宽高的一半，以保证图片的中心点与鼠标重合。 除了上述的示例代码，还可以使用CSS的transform属性来实现图片跟着鼠标移动的效果。具体实现方式可以参考下面的代码：

HTML：

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

CSS：

#moveImg {
position: absolute;
transform: translate(-50%, -50%);
/* 注意：这里需要将图片定位在中心点的位置 */
}
#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);
});

在上面的代码中，我们先给图片的样式设置了transform: translate(-50%, -50%)，将图片定位在中心点的位置。然后，在container元素上添加了:hover伪类，当鼠标悬停在container上时，通过变换translate的具体数值来实现图片移动的效果。 在JavaScript中，我们使用了style.setProperty方法设置了--x和--y两个自定义变量。这些变量的值是鼠标的x、y坐标，单位为像素。在CSS中，我们使用了calc()函数来计算translate的具体数值，其中用到了--x和--y这两个自定义变量。 总的来说，无论是通过设置left和top属性，还是通过CSS的transform属性实现图片跟着鼠标移动的效果，都非常简单易懂。关键在于理解事件回调函数中如何计算图片的位置，以及如何根据自定义变量来计算translate的具体数值。希望本文能对你有所帮助！