js实现图片跟随鼠标移动的两种方法

方法一：使用mousemove事件

首先，该方法需要给需要跟随鼠标移动的图片绑定鼠标移动事件mousemove，并获取鼠标当前在页面中的位置坐标。随后，计算出图片应该移动到的位置并设置其left和top属性实现图片跟随鼠标移动。下面是具体的代码实现：

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

<script>
  var container = document.getElementById("container");
  var img = document.getElementById("img");
  container.addEventListener("mousemove", function(e) {
    var x = e.clientX - container.offsetLeft - img.width / 2;
    var y = e.clientY - container.offsetTop - img.height / 2;
    img.style.left = x + "px";
    img.style.top = y + "px";
  });
</script>

方法二：使用CSS中的transform

该方法使用CSS中的transform属性，设置该属性的translate()方法实现图片跟随鼠标移动的效果。具体来说，需要绑定鼠标移动事件，并通过JS修改类似下面的CSS代码实现图片位置的变换，其中translate()方法的参数是图片移动距离的水平和垂直方向的位移量：

#img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  transform: translate(-100px, -100px);
}

下面是具体的代码实现：

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

<script>
  var container = document.getElementById("container");
  var img = document.getElementById("img");
  container.addEventListener("mousemove", function(e) {
    var x = e.clientX - container.offsetLeft;
    var y = e.clientY - container.offsetTop;
    img.style.transform = "translate(" + (x - img.width / 2) + "px," + (y - img.height / 2) + "px)";
  });
</script>

总结

以上两种方法都可以实现图片跟随鼠标移动的效果，第一种方法需要通过JS设置图片的left和top属性，而第二种方法则是通过CSS中的transform来实现。在实际开发过程中，应选择适合自己项目的方法，并根据实际需求进行调整。