js图片跟随鼠标移动效果

作者：System 时间：2024年08月14日分类：所有,javascript 字数：939

要实现在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属性，使图片跟随鼠标移动。

js图片跟随鼠标移动效果

评论已关闭

推荐阅读