js图片跟随鼠标移动效果
要实现在JavaScript中的图片跟随鼠标移动的效果，你可以监听鼠标移动事件mousemove，并更新图片的位置。以下是一个简单的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Follow Mouse</title>
<style>
#myImage {
position: absolute;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img id="myImage" src="path_to_your_image.png" alt="Following Mouse">
<script src="script.js"></script>
</body>
</html>JavaScript部分 (script.js):
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var image = document.getElementById('myImage');
image.style.left = x + 'px';
image.style.top = y + 'px';
});在这个例子中，图片元素<img>被设置为绝对定位，这样我们就可以通过JavaScript动态地改变它的left和top属性来更新它的位置。当用户移动鼠标时，mousemove事件被触发，事件处理函数会获取鼠标的当前位置，并更新图片的style.left和style.top属性，使图片跟随鼠标移动。
评论已关闭