js原生代码

要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。

HTML代码：

<div id="container"><img id="image" src="path_to_image.jpg" alt="Image">
</div>

CSS代码：

#container {position: relative;width: 400px;height: 400px;
}#image {position: absolute;top: 0;left: 0;transition: transform 0.3s ease-in-out;
}

JavaScript代码：

var container = document.getElementById('container');
var image = document.getElementById('image');container.addEventListener('mousemove', function(event) {var mouseX = event.clientX - container.offsetLeft;var mouseY = event.clientY - container.offsetTop;var imageX = (mouseX / container.offsetWidth) * 20 - 10;var imageY = (mouseY / container.offsetHeight) * 20 - 10;image.style.transform = 'translate(' + imageX + 'px, ' + imageY + 'px)';
});

在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。

注意修改代码中的图像路径(path_to_image.jpg)以适应你的实际需求。此外，你还可以根据需要调整图片的移动范围和速度，这里使用的是一个简单的线性转换，将鼠标坐标映射到-10到10的范围内。

jquery代码

你可以使用jQuery和CSS来实现图片跟随鼠标移动的效果。下面是一个简单的示例:

HTML:

<div class="container"><img src="your-image-url" alt="Image" class="image">
</div>

CSS:

.container {position: relative;width: 500px; /* 容器宽度 */height: 300px; /* 容器高度 */
}.image {position: absolute;top: 0;left: 0;width: 100px; /* 图片宽度 */height: 100px; /* 图片高度 */transition: transform 0.2s ease-out; /* 过渡效果 */
}

JavaScript:

$(document).mousemove(function(e) {var mouseX = e.pageX; // 获取鼠标X坐标var mouseY = e.pageY; // 获取鼠标Y坐标var container = $('.container');var containerX = container.offset().left; // 获取容器左边距离文档的距离var containerY = container.offset().top; // 获取容器上边距离文档的距离var image = $('.image');var imageX = mouseX - containerX - (image.width() / 2); // 计算图片X坐标var imageY = mouseY - containerY - (image.height() / 2); // 计算图片Y坐标image.css('transform', 'translate(' + imageX + 'px, ' + imageY + 'px)'); // 移动图片
});

此代码会使图片在鼠标移动时跟随移动。你只需要将your-image-url替换为你自己的图片链接，并适当调整容器和图片的宽度、高度，就可以实现你想要的效果。

vue代码实现方式

要实现Vue图片跟随鼠标移动的效果，可以通过以下步骤来实现：

1. 在Vue组件中引入图片：

<template><div><img src="path_to_image" class="image" ref="image" /></div>
</template><style>
.image {position: absolute; /* 设置图片为绝对定位，以便后续移动 */
}
</style>

1. 在Vue组件的mounted钩子函数中，监听鼠标移动事件，并根据鼠标的坐标来更新图片的位置：

mounted() {this.$refs.image.addEventListener('mousemove', this.moveImage);
},methods: {moveImage(event) {const image = this.$refs.image;const x = event.clientX;const y = event.clientY;// 根据鼠标坐标更新图片位置image.style.left = x + 'px';image.style.top = y + 'px';}
},beforeDestroy() {this.$refs.image.removeEventListener('mousemove', this.moveImage);
}

这样，当鼠标在图片上移动时，图片将会跟随鼠标移动。