本文主要是介绍js图片跟随鼠标移动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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图片跟随鼠标移动的效果，可以通过以下步骤来实现：
- 在Vue组件中引入图片：
<template><div><img src="path_to_image" class="image" ref="image" /></div>
</template><style>
.image {position: absolute; /* 设置图片为绝对定位，以便后续移动 */
}
</style>
- 在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);
}
这样，当鼠标在图片上移动时，图片将会跟随鼠标移动。
这篇关于js图片跟随鼠标移动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
